Split header into two columns – Blogger Guide

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

Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *