Splitting Your Header Department Into 2 Dissimilar Parts Inwards Blogger

Usually a header consist of the companionship logo but forthwith a days it is used equally an of import house where people piece of employment to set at that topographic point advertisement.Some of the Blogger templates has this feature.Commonly it is a uncomplicated container which tin sack comprise ii widgets at 1 fourth dimension 1 later the other adjacent commonly it consist of your logo as well as promotion or etc.So delight but your attending towards this tutorial carefully,don't worry its non really hard to splitter your header but it needs your piffling attending because templates are differently coded but the method remains the same

Here is the screenshot which volition assist y'all what nosotros are talking about,and this volition give y'all the fine persuasion close the tutorial.the header which is not slitted into ii parts

In New Interface

In Old Interface

Now inwards this screenshot y'all tin sack come across what volition going to hand off later you successfully applied the code

In New Interface

In Old Interface

To Splite Header inwards Two Different Parts:

1.Go to blogger.com >> Your Blog >> Design >> Edit Html / Template

2.Backup your template in case some affair went wrong.If y'all don't know how to backup template uncomplicated catch the tutorial how y'all tin sack backup your template inwards blogger

3.Uncheck the "Expand the Widget'' if it is checked 

4.Search for the next code inwards the template                                                                           

#header-wrapper {
  width:960px;
  margin:0 auto 10px;
  border:1px venture $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px venture $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;
}

Important:Due to dissimilar template coding the code to a higher house mightiness endure different.For illustration #header mightiness be .header thence await for the related code

5.Now later finding the code,replace the entire code amongst the next code

/*------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;
 
}

6.After Replacing the code search for the next code,if y'all could non uncovering the code thence await for the similar code which should include div department of your header                                                              

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

Rememeber: the code must contain <b:section as well as </b:section> tags to brand the whole procedure work

7.After y'all uncovering the code to a higher house or like code supplant the entire code amongst the next code                                                                   

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

<b:widget id='Header1' locked='true' title=' (Header)' type='Header'/>

</b:section>
</div>

<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div></div>

8.Now press the Save Now push as well as to salvage the whole procedure as well as thence catch layout page to come across the difference

Customizing your header design:
To alter the width of y'all header only replace 960px; 
To Change the color of the championship only replace #BF0100; To Change the color of the header description replace #3B3B3B;

if y'all demand whatever assist experience gratuitous to ask,if y'all follow my educational activity equally directed to a higher house it is slice of cake but if y'all don't follow what is instructed it mightiness popular off hard to over come,any how experience gratuitous to inquire your question