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.

Add a Custom Header in Blogger

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following code in your blogs html : (Click Ctrl and F for a search bar to find the code):

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

Note 1. - 1 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.

Note 2. - no 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.

Step 3. Dont save your template!

Now you can add custom header for your blog. But before you proceed, let's remove current header on your blog.

Step 1. Find the following code in your blogs html : (Click Ctrl and F for a search bar to find the code):

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

Note - If you cant find all code try this <b:widget id='Header1' locked and you will see the rest of code there...

Step 2. Change the locked='true' attribute value to locked='false'.

Step 3. Now Save Template.

Drop Your Comments Below.