Add banner, Adsense or search box in header

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post.

Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how?

By simply adding a new section in the header. A section functions as widget container and is represented by a dashed-lined box in the Layout and usually comes with an Add A Gadget link thingy. Once you get the Add A Gadget added in there, the rest is easy.

(Update: There is another way to Add widgets next to Blogger header, check it out.)

Here we go:

 

1. Adding a section (in HTML)

1. Login to your Blogger account.
2. Go to Template > Edit HTML.
3. Back up your template.
4. Make sure the Expand Widget Templates checkbox is UNCHECKED.
5. Look for the following lines in your HTML code:

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

6. To add a section, insert the following code right under (after) it:

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

7. So the final code should look like this:

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

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

 

2. Styling the section (in CSS)

Position the sections side by side, by floating the section containing the blog title to the left,  and the new section to the right.

To achieve that,

1. Locate this line of code (you are still on Template > Edit HTML page):

   ]]></b:skin>

2. Add the following CSS code right before (on top of) the line.

   #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;}

3. Installing the widget

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

1. Go to Layout page.
2. Click the new Add A Gadget link and add your widget.
   Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.
3. Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.

Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.

Enjoy!