Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

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

by Durodola Ridwan | Thursday, January 17, 2013 | 5 Comments

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!".

5 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger