How to have Add a Gadget option for Header section of the blogger’s blog and how to make Header gadget / widget moveable?

Share |

Many of my friends are asking me how to add more widgets at header section of the blogger’s blog or else how move blog header gadget / widget to some other place. So here are some simple steps to do that. You need to some editing in the HTML template of the blog. You may be worried if I do not know HTML than what to do? You do not need to worry about just apply following simple steps and everything is done:

1. Login to blogger.com and go to Dashboard

2. Now go to Layout or Template of the blog for which you wanted to change the header image or add the new header image

3. Now you are at Layout -> Page Elements. Click on Edit HTML link to edit HTML template for the blog

4. Here the first thing you need to do is take a back of your HTML template. Hence you can restore it later if you wanted to undo changes (Click here to know how to backup and restore HTML template for blogger’s blog)

5. After taking backup find following line the HTML template as shown in the image.

<b:section class=’header’ id=’header’ maxwidget=’1’ showaddelement=’no’>

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

</b:section>

6. In the above code instead of title=’Technical Details(Header)’ it will be your blog’s title followed by (Header)

e.g. if your blog’s name is Latest Jokes then it will be title=’Latest Jokes(Header)’

7. The thing you need to modify in the given code is whichever is in the red and bold

· Change the value of maxwidget=’1’ to maxwidget=’5’ (instead of 5 you can specify any number more than 1),

· Change the value of showaddelement=’no’ to showaddelement=’yes’

· And finally change the value of locked=’true’ to locked=’false’

8. Hence after modifying above code in HTML template it looks like bellow:

<b:section class=’header’ id=’header’ maxwidget=’5’ showaddelement=’yes’>

<b:widget id=’Header1’ locked=’false’ title=’Technical Details(Header)’ type=’Header’/>

</b:section>

9. Please check the bellow image

10. Now click on “PREVIEW” button if everything is alright in the preview then you can save the template by clicking the “SAVE” button or if something seems to wrong then click on “CLEAR EDITS” button and follow the instructions from the step 5 again to check if there is something wrong.

11. Now you can click on the link “Page Elements” and here you will have option to “Add a Gadget” in the Header section as well as now blog header section is now moveable.

12. Click on “Add a Gadget” link above the blog Header to add a gadget in the header section. Add any kind of gadget and save the template

13. You can also move blog header to some other section by drag and drop.

14. Don’t for get to click on “SAVE” button after making any kind of changes.

15. Finally if you are not happy with new look and feel or template then you can always restore the backed up HTML template at step 4 ( follow the instruction to restore the backed up template)

Related Articles

How to embed Adsense code within post (after post title and before post body) for the blogger blog ?

How to have Add a Gadget option for Blog Post section of the blogger’s blog and how to make Blog Post gadget / widget moveable?

How to have Add a Gadget option for Header section of the blogger’s blog and how to make Header gadget / widget moveable?

How to add / Change Header image of blogger’s blog?

How should I restore my blog’s logo after changing to custom template?

How should I change my blog’s logo?

Change the order of the blog post archive

How to enable / disable adsense ads for the blog post widget ?

My blog is lost or forgot username / password of blogger blog

How to change scroll bar color and look and feel for a blog or website / web page?

Blogger Link list with the scroll bar support - link list with large set of links