Monday, January 9, 2012

[How To] Add an Ad Space or Gadget Area Beside Blogger Header

You must have seen that many blogs has an ad space in/beside blogger header. Mostly, all of the blogs use a 468*60 ad space beside the blogger header. In this case, if you want to have an ad space in your blogger header then you have to split your blogger header into to parts [However, it's not going to harm your blog's SEO]. And by then you may wish to use this space as a gadget area if you don't really want to show adsense ads there.

After you've added an ad space you'll have a new gadget area like this one:










How to add an ad space beside blogger header?


  • Go to Design => Edit HTML [in new blogger interface go to Template => Edit HTML].
  • Then Find the following codes or similar codes. [Press Ctrl+F; then search for it]
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

  • Now replace the above codes with the code below. 
#header {
          margin-top:-15px;
          width:370px;
          float:left;
          height: 90px;}
#top-ad {
         width: 470px;
         float: right;
         margin-top: 5px;
         padding: 0;
}

  • Again find the following code. 
<div id='header-wrapper'>
<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>
</b:widget>
</b:section></div>
 Note: You can only find the <div id='header-wrapper'>  code and the rest will be below that code. 

  • Finally replace it with the code below and click on Save Template. 
<div id='header-wrapper'>
<div id='header'>
<b:section class='header' id='blog-title' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'/>
</b:section>
</div>

<div id='top-ad'>
<b:section class='top-ad' id='top-ad' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

You're all done with adding a gadget area or an ad space in/or beside your blogger header. However, if you are stuck with something or having problems with implementing the process then please don't feel shy to comment.