Split Your Blogger Header In Two Parts or Sections

Split Your Blogger Header In Two Parts or Sections

data:blog.title
Blogger Tutorials
In terms of custom blogger templates sometime you need to split the header to add an additional gadget on the top right side of your templates. Because an ideal blog site should have 2 part in header section. Today we will learn how to Split your Blogger header into 2 Column.  To do it just follow the below steps.  

Step 1 Log in to your blogger account and Click on Template ->Edit HTML-> Proceed
Step 2 Do Check on "Expand Widget Templates"

Step 3 Now find the below code in your template by pressing Ctrl+F

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Step 4  Now replace the above code by paste the below code.

#header {
float:left;
width:40%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:60%; height:200px}

You can change width and height as your wish.





Step 5 Now again find the below code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
</div>

Step 6  Now replace the above code by paste the below code.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Spice (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Change the Blogger Spice With your Blog Name

Step 7 Now Save your template and check in your templates Layout to see the effect.
Happy blogging.

Open Comment Box
hackthehackersidea.blogspot.com says: 4/21/2013

Thanks For Such A Nice Post

Beema Mahin says: 6/28/2013

Thank you for your informative post.

Talib kadhem says: 10/17/2014

thank you

Mohammad Fazle Rabbi says: 10/19/2014

Welcome Talib.

Contact Form

Name

Email *

Message *