How To Split Your Header Section into two parts in Blogger

Usually a headlines contain the organization logo but now a times it is used as an essential position where individuals use to put there marketing.Some of the Weblog writer layouts has this function.Commonly it is a easy package which can contain 2 icons at once one after the other part by part normally it contain your organization brand name and marketing or etc.So please but your interest towards this guide properly,don't fear its not very challenging to splitter your headlines but it needs your little interest because layouts are diversely known as but the technique continues to be the same

Here is the monitor shot which will help you what we are referring to,and this will provide you with the excellent concept about the guide.the headlines which is not slitted into 2 parts

In New Interface
In Old Interface


Now in this monitor shot you can see what will going to occur after you efficiently used the code


In New Interface
In Old Interface

To Splite Header in Two Different Parts:
1.Go to blogger.com >> Your Weblog >> Style >> Modify Code / Template
2.Backup your design in situation a factor went incorrect.If you don't know how to back-up design easy check out the guide how you can back-up your design in blogger
3.Uncheck the "Expand the Widget'' if it is examined
4.Search for the following value in the look                                                                          

    #header-wrapper {
      width:960px;
      margin:0 automatic 10px;
      border:1px strong $bordercolor;
      }
    #header-inner {
      background-position: center;
      margin-left: auto;
      margin-right: auto;
    }
    #header {
      margin: 5px;
      border: 1px strong $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 different design programming the value above might be different.For example #header might be .header so look for the relevant code

5.Now after discovering the value,replace the whole value with the following code

    /*------Header-----*/
    #header-wrapper{
        width: 960px;
        color: #000;
        margin: 30px automatic 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 Changing the value look for for the following value,if you could not look for the value then look for the identical value which should consist of div area of your headlines                                                             

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

Rememeber: the value must contain <b:section and </b:section> labels to create the whole procedure work

7.After you look for the value above or identical value substitute the whole value with the following value                                                                  

    <div id='header-wrapper'>
    <div class='headerleft'>
          <b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='My Weblog writer Lab (Header)' type='Header'/>
    </b:section>
    </div>
    <div class='headerright'>
    <b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
    </b:section>
    </div>

8.Now media the Preserve Now option and to avoid wasting the whole procedure and then check out structure web page to see the difference


Customizing your headlines design:
To modify the dimension you headlines basically substitute 960px;
To Alter large of the name basically substitute #BF0100;
To Alter large of the headlines information substitute #3B3B3B;


if you need any help you can ask,if you adhere to my teaching as instructed above it is easy but if you don't adhere to what is instructed it might become challenging to over come,any how you can ask your question