How to Split Header in Two Columns in Blogger - Hubuhs. Living and Sharing

Hubuhs. Living and Sharing

Hubuhs is spot for living, blogger, tech, sport, travel, auto and food

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 : /* He... 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.
↩ Next Back to Top Prev ↪