Divide Blogger Header In Two Sections or Parts – Blogs Daddy

Subscribe To Our Regular Email Updates

Customization

1. Go to Blogger > Design > Edit HTML
2. Backup your template
3. Uncheck the “Expand Widget Templates” box if in case it is checked.
4. Search for the following code:

#header-wrapper {
width:960px;
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;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/*——Header—–*/
#header-wrapper{
width: 960px;
color: #000;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1, .headerleft h1 a,.headerleft h1 a:hover,.headerleft h1 a:visited {
color: #BF0100;
font-size: 36px;
font-family: ‘Ultra’, serif, Arial;
font-weight: bold;
margin: 0;
padding: 0px 0 5px 0;
text-decoration: none;
text-shadow: 6px 6px 4px #ccc;
line-height:1.2em;
}
.headerleft h3 {
font-family: arial, tahoma, Sans-Serif;
font-weight: normal;
margin: 0;
padding: 0;
}
.headerleft .description {
color: #3B3B3B;
font:bold 12px Helvetica, arial, sans-serif;
margin: 0px;
padding: 0 0 20px 0;
text-shadow: 4px 4px 6px #ccc;
}

.headerleft {
width: 450px;
float: left;
margin: 0;
padding: 0;
height:80px;
}
.headerright {
width: 468px;
height:80px;
float: right;
margin: 0px;
padding:1px 0 0 0;

}

<div id=’header-wrapper’>
      <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’The MBT Lab (Header)’ type=’Header’/>
</b:section> 

<div id=’header-wrapper’>
<div class=’headerleft’>
      <b:section class=’headerleft’ id=’headerleft’ maxwidgets=’1′ showaddelement=’no’> 

<b:widget id=’Header1′ locked=’true’ title=’The MBT Lab (Header)’ type=’Header’/>

</b:section>
</div>

<div class=’headerright’>
<b:section class=’headerright’ id=’headerright’ maxwidgets=’1′ showaddelement=’yes’>
<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>

title, logo and descriptionNavigation MenuHeader divided in two parts468 x 60 size bannerNote: Now replace this entire code with the following one,

960px#BF0100#3B3B3B