Splitting Your Header Department Into 2 Dissimilar Parts Inwards Blogger

Usually a header consist of the society logo but similar a shot a days it is used equally an of import house where people role to set at that topographic point advertisement.Some of the Blogger templates has this feature.Commonly it is a uncomplicated container which tin comprise two widgets at 1 fourth dimension 1 afterward the other adjacent usually it consist of your logo too promotion or etc.So delight but your attending towards this tutorial carefully,don't worry its non real hard to splitter your header but it needs your piddling attending because templates are differently coded but the method remains the same

Here is the screenshot which volition help you lot what nosotros are talking about,and this volition give you lot the fine persuasion well-nigh the tutorial.the header which is not slitted into two parts

In New Interface

In Old Interface

Now inwards this screenshot you lot tin encounter what volition going to plough over afterward 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 you lot don't know how to backup template uncomplicated catch the tutorial how you lot tin 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 company $bordercolor;
  }

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

#header {
  margin: 5px;
  border: 1px company $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 inwards a higher house mightiness travel different.For instance #header mightiness be .header thus hold back for the related code

5.Now afterward finding the code,replace the entire code alongside 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 you lot could non notice the code thus hold back 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 too </b:section> tags to brand the whole procedure work

7.After you lot notice the code inwards a higher house or similar code supervene upon the entire code alongside 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 too to salve the whole procedure too thus catch layout page to encounter the difference

Customizing your header design:
To alter the width of you lot header but replace 960px; 
To Change the color of the championship but replace #BF0100; To Change the color of the header description replace #3B3B3B;

if you lot demand whatsoever help experience gratuitous to ask,if you lot follow my teaching equally directed inwards a higher house it is slice of cake but if you lot don't follow what is instructed it mightiness conk hard to over come,any how experience gratuitous to enquire your question