Split header into two columns - Blogger Guide

Thursday, March 17, 2011

This tutorial will show you how to split your template's header into two columns so that you can add your widgets along with your blog's logo. By default, blogger doesn't have any option to split header column into two parts. so here is the how-to guide.


Go to your blogger Dashboard >>Design>>Edit HTML

Don't tick Expand Widget templates
Search for the following code in your template [You can search for the code by pressing CTRL + F on your keyboard]
<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>
Just below the above code, paste the following code

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
It should look like this

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Now search your template for the following code 

]]></b:skin>
Add the following code just above ]]></b:skin>
#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%;}
body#layout #header-right {width: 50%;}
Only one step remains.  Now search you template for 

]]> </b:template-skin>
and just above that, paste the following code

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}
Finally hit SAVE TEMPLATE and then go to page elements to see that your header has been spitted into two columns. Enjoy

You can follow us on Twitter or Join us on Facebook to receive all updates . . .




Share your views...

0 Respones to "Split header into two columns - Blogger Guide"

Post a Comment

 

Connect with us

Followers

© 2010 - 2017 theinfoW.com All Rights Reserved | Contact Us | About Us | Privacy Policy | Terms of Use |