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.

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 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;'/>
</div>
</div>

  Now find for <div style='clear:both;'/>  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 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;'/>
</div>
</div>

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

 

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

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

Posted in: Blogs and Websites