Thursday, 17 January 2013

HOW TO SPLIT BLOGGER HEADER INTO TWO SECTIONS?

Blogger is having very simple layout which you can customize through template designer.You can add two sidebar or 3 column footer to your blog but there is no way by which you can split your blog header in two parts. Splitting your blog header and adding Adsense ads can help to boost your CPC And Clicks, you can also add any widget in your blog header like search box of social sharing button.Just follow below steps to divide your blog header in two parts.

Step 1


  • Go to Blogger Dashboard
  • Click On Template >> Edit HTML >> Proceed
  • Make Sure That Expand Widget Template checkbox is UNCHECKED
  • Now find below code there

<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>

  • Insert Following Code Right Under (after) It.

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

  • Finally Codes Should Like 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;'/>

Step 2



  • Now Find ]]></b:skin> 
  • Paste Below Code Above ]]></b:skin>

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


  •  You can easily see highlighted text in code.Adjust Both header width according to your choice.
  • After Finishing All Steps Click On Save Template Button And Enjoy Your Second Header.


Adding Widget In Header



  • Go to Blogger Dashboard
  • Click On Layout Tab 
  • There you will find add gadget option next to your blogger header just click on it and add any widget you want to add.
  • You can see it in my blog -www.makecashhonline.blogspot.in

1 comment:

  1. The tutorial works perfectly in splitting the header, except that both sections have to be the same height or there is white space between "header 1" and my posting section. Is there a way around this? Or can my header just be the width of my posting section and the right sidebar start at the top, even with my header image?

    See www.tazandbelly.com -- I want to eliminate the white space above the top photo in the sidebar.

    ReplyDelete