Add A Widget (Menu) Above The Title (Header) In Blogger

Browsing around websites you may notice that the vast majority have a small menu bar at the very top of the page. This sometimes adds consistent functionality to the site on all pages, or like the one on this blog adds basic quick links and some info. Adding this is a simple way to make your blog look more professional, or just to add some fanciness.


In order to do this you need to go into the HTML and edit some of the code to provide the ability to add widgets to this section in the Page Elements area.

1. First, in Blogger go to the Design View and click on Edit HTML. As always, download the full template to keep a backup before you make any changes.

Then do a search and find the following code (hint: I found that the instances of the search term – ‘Header’ – only occur here so you may be able to search for just this):

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bottom Left (Header)' type='Header'>

2. Here you can see that maxwidgets is set to just 1, showaddelement is set to no, and locked is set to true. Change the maxwidgets to a higher number (I used 3) to allow more widgets to be added. Change the showaddelement to yes to allow for the add widget link to be selected. Finally, change the locked attribute to false to allow you to move the default position of the header. You should now be left with the following code:

<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Bottom Left (Header)' type='Header'>

3. Now save the template and go back to the Page Elements area in the Design section of the Blogger Dashboard. You should now have the ability to add widgets to this section! You can add anything you want here but my advice is to keep it simple.