Create Custom Header in Blogger Templates

All blogger templates come with a specific default header. But it’s not necessary to stick with that default header, we can go ahead, create our own header and use that in our blogger blogs. For this, you have to use your favourite image editing tools like MS paint, Adobe Photoshop etc. Measure the width of your blog and create any attractive header according to that. You can play with the height of the header as you want. Once you are done with your header, it’s time to implement that on our blogger blog.

1. Log in to your blogger blog.
2. Go to Layout >> Edit HTML
3. Make a back up of your blog by clicking on Download Full Template.
4. Now search for the following code in your HTML Template

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/>
</b:section> </div>



5. Look at the above code. Few parts are written in bold letters. You have to change them in order to allow custom header to be used. Change 1 to 2, change no to yes and change true to false.
6. Save the template and go the Page Elements. Look at the header section of your template, a new Add a Gadget option should be there.



7. Here you can customize your template the way you want. If you want a gorgeous picture as your blogger header, but do not want it to link to your blog’s homepage, you can do it by choosing the Picture option and uploading your picture. Now, your blog will show your uploaded picture as your blog’s header but it will link to nowhere.
8. If you want to have a header picture and it should link to your blog’s homepage, you can do it by adding some HTML tag. First upload your picture somewhere. You can use imageshack, tinypic, photobucket to host your pictures for free. After uploading your picture get the direct link to that picture. Now click on Add a Gadget >> HTML/JavaScript and add the following code there. Leave the title field blank. Remember to replace YOUR-BLOG-URL with your actual blog address and also replace LINK-TO-YOUR-IAMGE with the actual link to your image and then Save.

<a href="YOUR-BLOG-URL"><img src="LINK-TO-YOUR-IAMGE"></a>

9. Now we have got a new header on your blog. But your old header is still there. Remove the old header by clicking on Edit >> Remove.
10. You are done now with a new blogger custom header.

In this way you can also have two or more headers on your blogger blogs. If you face any problems, use the comment section below for help.

Related posts:

1. Hide Blog Title & Description From Header On Blogger/Blogspot
2. How to Remove Blogger Navbar
3. How to take Backup of your Blogger Blog Templates
4. Show Or Hide Blogs From Your Blogger Profile Page
5. How To Set Up A Custom Domain With Blogger
6. Sexy Blogger Template Download : Amature
7. New Blogger XML Templates Download
8. How To Create Recent Posts Widget For Blogger Blogs
9. Enable Or Disable Word Verification For Comments On Blogger/Blogspot
10. Download Blogger XML Template : LoveBlog

Filed in: Blogspot
Tagged with: Blogger Templates • Blogger Tricks