How to Add a Custom Header in Blogger

By default, Blogger offers you a default static blog header including title and description of your blog. Further you can display image or logo with your header too. Does it bugging you? The way how your header is. Do you think you could have done more to your header if you can use a custom header instead of default one? If you are not prefer the default header style, you will seek around a way to customize or add a custom header for your blog. As far as if you have tried it by yourself, you may have find that current blog header is cannot move a bit or remove it. So you might have wonder why you can't remove default Blogger header and add a new custom header to your blog. Still wondering?

It seems you can't touch or remove default header to use custom header, but you are absolutely wrong until you find how to do it. Blogger made the header element locked by itself to not to remove by general users. So they have to use default header with blog title, description and eligible header image. But it doesn't mean Blogger doesn't let you hack it and implement a new one. You just need to find how to do it. Here we will discuss how to remove your current header safely without affecting to your existing blog and let you implement your own header on it. I hope you would love to go through and add your own custom header to show off to your visitors. Why waiting? Let's start.

Before You Go:

* If you wanna know how to customize the existing blog header, read How to Customize Your Header in Blogger.

* If you are looking for adding a header image for you blog using dynamic views, read How to Add a Header Image for Dynamic Views in Blogger.


Steps:

1. Navigate to your Blogger Dashboard.

2. Click on your Blog Title.

3. Move on to Template tab from left pane.



Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button.



5. Tick on, Expand Widget Templates option.



6. Now search for following or similar line of code in your template which relates to your blog header section and alter attributes using regarding attribute information indicated.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Color Indication Information

   - Maximum Widgets in Header Section

This attribute specifies the maximum number of widgets can be included in header section. The default value is 1. So, by default, you can't add widgets more than one for your header section. By changing this value, you can allow adding more widgets for header section.

i.e: <b:section ... maxwidgets='3' ...

   - Enable/Disable Adding New Elements

Though you specified a new maxwidgets attribute value, you may not see Add a Gadget link at Page Elements page until you change this attribute value to yes. Change value to yes as you gonna add new custom header.

i.e: <b:section ... showaddelement='yes'

7. Now you can add custom header for your blog. But before you proceed, let's remove current header on your blog. You can find the line similar to below, just after the line of code we discussed in step 7.

<b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/>

8. Change the locked attribute value to false.

i.e: <b:widget id='Header... locked='false'...

9. Now Save Template.

10. Go to Layout tab.



11. Find the Header element of your blog.



12. Now click Edit link correspond to the header.

13. On the immediate pop-up box, click Remove button and confirm removal.

14. Now your default header has been removed. You can see Add a Gadget link at the place where default header was placed before. Click on the link to implement custom header.

15. Now find suitable element for header from the gadget list. You can add image box if you prefer adding custom image as your header or else HTML/JavaScript element to implement header with dynamic or static content with the help of your HTML knowledge.

Note: You can add more gadgets which seems to be suite to your header section (except to the main header) upto the number of widgets you allowed in the header layout code at step 7.