How to Customize Your Blogger Template with Your Own Headers

If you are not too happy with the default header in Blogger, you now can make one for yourself. You can use image editing tools, Adobe Photoshop, MS paint, and lots more. You can change colour, width, height and arrange it according to your tastes.

Steps to follow while making your own header is listed below:

1. Sign in to your blogger’s account. .

2. Click on Layout and then Edit HTML.

3. Make sure that you have backup of all your blogs. You can do that by Downloading Full Template.

4. In the HTML template you have to look for the below mentioned code:

<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. Now here you have to make three changes and they are:

  • Change the value of maxwidgets to 2.
  • Change the value of showaddelements to yes.
  • Last but not the least, change the value of locked to false.

6. Now after you are done changing, go to Page Elements but remember to save the templates. In the header section you will find a new feature called ‘Add a Gadget’.

7. This feature will let you to change the header according to your wish, and you can design it as you want it.

8. You can also add a picture in header along with giving it the hyperlink to your Blog’s homepage. To do so you have to make some changes in HTML. First of all you have to upload the picture online using tinypic, imageshack, photobucket which allow you to post your images for free. Go to Add a Gadget and click on it, then in HTML/ JavaScript do the following:

  • Title field should be blank.
  • Put your blog address and link of your image in “your blog URL” and “link to you image” respectively. Don’t forget to save it.   For example, <a href=”YOUR-BLOG-URL”><img src=”LINK-TO-YOUR-IAMGE”></a>
  • To get rid of old header go to Edit and click on Remove
  • Now you have created your own Header for your blog