How To Divide Blogger Header In Two Parts or Sections

 

The Blog writer headlines is Involve every individual area that you see at the top of every weblog. Where you can add your website logo or you can add your website headline and information So many individuals are do not like these kind of headlines and want to Modify it in tow areas.

Today I am absolutely tell you how you can improve your headlines in two areas. you only need to modifying in you design and you don this in few moments. When you don this then your design look two areas where you can add one little company brand name and one 468 by 60 advertising to right part. When you don this then you go to your Structure and add your advertising gadget.

Split Your Blogger Header in Two Parts:

This is very simple but need one thing that is your interest. You need to study all actions very greatly and then implement on your blog

1. Log-in to your Blogger account and Click on Template>>Edit HTML.

2. Back up your Template.

3. Search the following Code.

- See more at: http://yourallchoices.blogspot.com/2013/05/divide-blogger-header.html#sthash.bkurrToI.dpuf

1. Log-in to your Blogger account and Click on Template>>Edit HTML.

2. Back up your Template.
3. Search 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;
}

Remember your Code is not exact but similar to above code. You select above code contain the words "#header" ".header" at start.

4.When you find it then Replace it with below 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: #0000FF;
    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: #FFFF00;
    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;
       
}

4.Now again Search Below Code. Its also not exact but similar. You find this Code Contain the <b:section and </b:section> tags.

<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> 

5.Now Replace the above It with Below 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='The MBT Lab (Header)' type='Header'/>
</b:section>
</div>
<div class='headerright'>
<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>

6.Click on Save Template and View a new Look of your Template.

Customization:

If you want to Adjust header width the Edit: 960px

If you want to Change header title Color then Chang e: #0000FF
If you want to Change Header description colour then change: #FFFF00

Need Help?

I wish you Don all factors Efficiently if you got any issue then you can ask by doing a statement below and also Register E-mail up-dates and keep viewing this site for discover more about writing a blog and other factors.

4.Now again Search Below Code. Its also not exact but similar. You find this Code Contain the <b:section and </b:section> tags. - See more at: http://yourallchoices.blogspot.com/2013/05/divide-blogger-header.html#sthash.bkurrToI.dpuf