A customized header is not difficult. You just need to know what you are doing. Because templates vary, header widths and heights vary. You’re going to have to find your templates’ allowance for the header width and height and make a header the same size– or– make a header and adjust your template’s width and height measurements.
Neither one is difficult. However, if you are brand-new at this and are worried you’ll wreck your template, you can back up your template by downloading it to your computer (and uploading it if you want to revert back to it). If you don’t know how to backup your template, go here for a quick tutorial.
I am assuming that you 1) have a new header already made and 2) that this new header is in the dimensions according to your template. For example, if your template has an existing header that is 950px wide and 167px high, you need a header that is 950px wide and 167px high. 3) your new header is already uploaded to a photohosting website.
Another thing is… your template may not even have a header. I have had templates that had nothing about a header, because all it had at the top was space for your blog title. There are ways to change that, but that is a whole different tutorial and goes beyond the scope of this post. You’d have to build a section of html code within your template to make a header. It’s up to you; but if it was me, I’d just get another template with a header, so I could adjust it. It’s so much easier.
So, before you continue on in this tutorial, you should have:
- created a header in the pixel dimensions for your template
- uploaded your header onto a phothosting website
- made a backup of your existing template
OK, with your template saved and your header ready to go, it’s time to get our hands dirty.
Sign in to Blogger and go to your dashboard. For the blog you want to change, choose “Layout.” This will take you to the Layouts page, showing many options. The page you automatically go to is “Page Elements.” You’ll see other pages, like “Fonts & Colors,” “Edit HTML,” and “Pick a New Template.” Choose “Edit HTML.”
You can see the guts (the html code) of your blog’s template in the window, below where it says “Edit Template.”
What you need to do is expose more of the code than is showing. You do this by checking the “Expand Widget Templates” checkbox. The page will reload.
Now, in this window, scroll down and look for this line of code:
<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’true’ title=” type=’HTML’>
<b:includable id=’main’>
It is usually right after the
</head>
<body>
part of your template.
Here’s a tip. Your browser has a search function built in it, using CTRL + F. If you press the CTRL key and the F key, a little window will pop up (for Internet Explorer, a separate window pops up; for Firefox, a section of the status bar enlarges). Type in the word “locked” and click “next” or “search.” Keep clicking until you find the string of code I specified above. This will find your code much quicker than scrolling through endless symbols. There are several areas in a template that have the word “locked” in it, so be sure you have the correct section. Like I said, every template varies slightly.
You are basically looking to unlock your header. So this keyword “locked” will be in an area that determines information about your header.
Once you’ve found the code, changed the word “true” to the word “false.” For example, if your code says this:
<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’true’ title=” type=’HTML’>
<b:includable id=’main’>
Change it to say this:
<!– begin header –>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML6′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
What you are essentially doing is telling Blogger that you want to be able to remove the Blogger header. You want to get rid of the old header and put in your new customized one. Save your template changes by clicking “Save Template.”
This part of the template work is done. Go to the page that says “Page Elements.” At the top, see where your header is located? (Right below the NavBar). Click on the “edit” link. A new window should pop up.
A new window should pop up. What you should see now is a button that gives you the option to “Remove Page Element.” This is the result of that html coding we did in the template.
The next step is to remove this page element. You want to get rid of the old Blogger header and put your own in here. It is very easy– but I’ll admit that I still tread very carefully when I do this. But there is really nothing to be nervous about, because you can always add the old header back: just click “Add a Page Element.” When the window pops up, scroll down and you will see the option to add a Page Header. See?
So, now that you have dumped the old “Page Element” header, You’ll want to create a new Page Element. Go ahead. Don’t worry if you don’t see at option to add a Page Element in the header area. Just pick one from the sidebar. When the new window pops up, choose “HTML/Javascript.” This will enable you to link back to the header image on your photohosting site, with the added bonus of making your new header linkable to your blog’s homepage.
Here’s what my code looks like:
You’ll need to change a few things here. For example, my header image is hosted at Photobucket. When people click on my header, I don’t want to direct them to Photobucket! I want them to return to my homepage. So you’ll need to change your code as I need to change mine. This is what I did. I changed this:
<a href=”http://photobucket.com” target=”_blank”><img
src=”http://i201.photobucket.com/albums/aa84/mrsmecomber/
headerimage.jpg” border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket”></a>
To this:
<a href=”http://mightytemplatetester.blogspot.com”><img
src=”http://i201.photobucket.com/albums/aa84/mrsmecomber/
headerimage.jpg” border=”0″ alt=”Mighty Template Tester”></a>
I just changed the URL to direct the header’s link back to my blog’s homepage. I also got rid of the target=”_blank” coding because this would only reload my blog’s homepage into another browser tab or browser window. The reader would find that very annoying. Finally, I changed the text from Photobucket hosting to something more appropriate for my blog.
Once you have the code configured, save the changes.
Now return back to your “Page Elements” page in Blogger, You’ll probably see your new header (called “HTML/Javascript”) in the sidebar! You have to guide it to where it belongs. Drag the box up toward the header. get it in the right spot, and it will drop in. When you’ve finished, click the orange “SAVE” button near the top. View your blog and you’ll see your new template header, complete with a link back to your homepage!
![[Slashdot]](http://slashdot.org/favicon.ico)
![[Digg]](http://digg.com/favicon.ico)
![[Reddit]](http://reddit.com/favicon.ico)
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
