Create Custom Header in Blogger Templates

By -

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.

blogger header images

  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
  5. <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>

    edit blogger template

  6. 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.
  7. 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.
  8. add header in blogger blogs

  9. 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.
  10. 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.
  11. <a href="YOUR-BLOG-URL"><img src="LINK-TO-YOUR-IAMGE"></a>
  12. 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.
  13. 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.

Soumya is the admin and founder of Techcular. He loves to discover and learn new things on Internet. You can find him writing on his personal blog few times.

7 Comments to Create Custom Header in Blogger Templates

  1. With the new blogger design it is making me add a title for a HTML/JavaScript.
    So then my custom header shows up but it has the title right above it. How do I get around having to put a title?

    • You can either put some spaces, mention your blog name or can even use the HTML editor to edit your template and add the header banner manually.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 12 + 3 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)