Split Your Blogger Header In Two Parts or Sections

Split Your Blogger Header In Two Parts or Sections

Comments: 4
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.

Speak Your Mind

Thanks For Such A Nice Post

Thank you for your informative post.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *