How to Add Extra Gadget/Widget Section to Blogger Header

Let’s go one step forward and add an extra gadget section within Blogger header in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box, Pages links list (navigation bar) or your AdSense ads.

Demo

In previous tutorial I have told you How to resize Blogger header section which needs to be done first to give space for the extra gadget to fit in. When done, follow the below steps.

Step 1: Go to Design > Edit HTML tab and backup your template.

Step 2: Find for the below code which you have edited and implemented in previous tutorial:

<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/> </b:section> <font color="red"><div style='clear:both;'/></font> </div> </div>

Now find for

which is marked in red in above code and before it add:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

So the full code will be:

<div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'/> <div class='region-inner header-inner'> <b:section class='header <strong><code>header-left</code></strong>' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/> </b:section> <b><b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/></b> <span class="Apple-style-span" style="color: red;"><div style='clear:both;'/></span> </div> </div>

Step 3: Find ]]> and before it add the following CSS:

.header-right { display:inline-block; float:right; width:<b>400px</b>; }

Now all is left is to change the width that are marked in bold. Increase or decrease the pixels according to your needs and positioning new header section.

Step 5: Save your template. Go to Design > Page Elements tab and from there you can add a new gadget to the newly created extra header section in Blogger. You may find that the extra gadget section is created just under your Blogger header as shown in the image below.

Click to enlarge

You need not to worry about it as when you will view your blog, it will appear side by side as it's seen on the demo.

Important

And again you have to remember that it's only for new Blogger templates. If you have a layout template then you must have a look at this tutorial: How to Add Sidebar (Gadget Section) to Header in Blogger