Split Your Blogger Header In Two Parts or Sections

Split Your Blogger Header In Two Parts or Sections

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.

Split Your Blogger Header In Two Parts or Sections
4 Stars stars - "Split Your Blogger Header In Two Parts or Sections" In terms of custom blogger templates sometime you need to split the header to add an   addition...

Post a Comment

Thank you for your informative post.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *