TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

How to split header in two columns on your blog ? 1. Go to Dashboard, click Design, click Edit HTML 2. Find code of HTML below : /* H... nopict

How to Split Header in Two Columns in Blogger

How to split header in two columns on your blog ?

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :
/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

you can use (Ctrl+F) to find easily

3. Remove it with code of HTML below :

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

4. Find code of HTML below :

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

you can use (Ctrl+F) to find easily

5. Remove it with code of HTML below :

<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Yourtitle (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

6. Click Save Template and done.

Now you've already splited header in two columns on your blog.

There are no comments yet for 'How to Split Header in Two Columns in Blogger'