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 section in the header. A section is a widget container of sorts, indicated by a light colored box in Page Elements tab and usually comes with an Add A Gadget link thingy. Once you have the Add A Gadget added in there, the rest is easy.
Here we go:

1. Adding a section (in HTML)

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Make sure the Expand Widget Templates checkbox is UNTICKED.
  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 Dashboard > Design > 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 Design > Page Elements.
  2. Click the new Add A Gadget link and add your widget.
    split header 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.


Share/Bookmark

1 comment:

Atm Card said...

Get A Blank ATM CARD And Cash Good Money/Funds Pay Your Debt directly today in any ATM machine around you anywhere in the world. contact cryptoatmhacker@gmail.com.. It's 100% guaranteed secure with no worries of being caught because the blank card it's already programmed and loaded with good funds in it, in such a way that's not traceable which also have a technique that makes it impossible for the CCTV to detect you, i am not a stupid man that i will come out to the public and start saying what someone have not done. For more info contact Mr john and also on how you are going to get your Card, Order yours today via Email: cryptoatmhacker@gmail.com

Post a Comment

Related Posts Plugin for WordPress, Blogger...