How to Add Extra Widget Section to Blogger Header

In this tutorial you will learn tips to add extra widget in blogger header section in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header.


Step 1: Login to your blogger dashboard and backup your template. Click "Edit HTML" button.

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

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>

Now find for <div style='clear:both;'/> which is marked in red in the above codes and before it add:

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

So the full code will be:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/>
</b:section>
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/><div style='clear:both;'/>

Step 3: Find ]]></b:skin> and before it add the following CSS:

.header-right {
display: inline-block;
float: right;
width: 400px;
}

Now you can customize the width of header & header-right section according to your choice.

Step 5: Save your template. Go to Layout tab and from there you can add a new gadget to the newly created extra gadget section within Blogger header. If you find that the extra gadget section is created just under your Header gadget as shown in the image below, 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.