Add Adsense, Banner, Search Box Or New Widget Section In Header

I saw a question in a forum concerning how to add adsense banner inside the header area, in which no one reply to the query, but i later gave her a solution to it, and i think i should share the trick behind it with my loyal readers too.
This tutorial will be base on how to add new widget section in your header. Actually you can add any widget of your choice to the new widget section.

How To Add New Widget Section Beside Header

• Go to your blogger dashboard (back up your template)
• Click on Template > Edit HTML > Proceed (Don't Mark/Tick Expand Widget Template)
• Use ctrl F to find the following line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>

• Now add the following new widget section code below the code above.

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

The final code should look like the following:

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

Styling With CSS

You will need to style the new widget section with CSS so as to position it beside the header

• Search for ]]></b:skin> and paste the following code above/before ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

• Now Save your template.

Installing New Widget

To add widget beside the header section, simply go to Layout and click on Add a Gadget as shown in the screenshot below.

You can add any widget of your choice beside header be it an ads banner, search box, social widgets etc.

Hope you like this hack pals? We are also thinking of adding/replacing the widget inside our header section, which widget do you think it will be suitable for that position. We will love to hear from you.

Happy hacking!

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz