-

22 February 2013

How To Split Blogger Header Into 2 Section

VM | 5:33 pm |



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.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Subscribe Updates, Its FREE!