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.
- Log in to your blogger blog.
- Go to Layout >> Edit HTML
- Make a back up of your blog by clicking on Download Full Template.
- Now search for the following code in your HTML Template
- 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.
- 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.
- 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.
- 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.
- You are done now with a new blogger custom header.
<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>
<a href="YOUR-BLOG-URL"><img src="LINK-TO-YOUR-IAMGE"></a>
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.