Divide Blogger Header In Two Parts or Sections


divide-headerA blogger header consists of every single section that appears at the top of your blog. It is a container which contains two important sections which are Logo portion where you add title, logo and description of blog and the second portion includes Navigation Menu where you add site links. Now this tutorial needs a little bit of your careful attention as we will need to edit your template's coding. Since most templates are designed by different sources so the coding will differ a little bit but the format would be same. See the Picture below to know what exactly is header splitting:

Normal header ,

normal header

Header divided/splitted in two parts,

split header

Did you see the difference? That is what we are about to do in order to create a separate section for your advertisement purposes. Normally we often add a 468 by 60 size banner to the right side and we therefore need a widget section for it. So lets play around!

Split your blog's Header in two parts

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

 

 

Note: You code will be not an exact but similar to the above one. Select all code that contains the word "#header" ".header" at start.

Now replace this entire code with the following one,

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

    4.   Now search for this code or a similar code that must contain div section of your header:

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

 

It must contain the <b:section and </b:section> tags.

    5.    Now replace this with the following 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.    Now Save your template and view your Page elements page and say bingo! :)

Customization

To adjust header width edit: 960px

To change Header Title colour change:#BF0100

To change Header description colour then change:#3B3B3B

 

Need Help?

This tutorial can be a lot easy if you do as instructed or if you have some prior knowledge of CSS and HTML else it could be a little headache. Do let me know if I could be of any further assistance. Keep trying till you finally make it. Peace out buddies. :>

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

38 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Your related tricks widget is cool! Can u pls share the code?

    ReplyDelete
  2. thank you so matsh your coooooooooooool

    ReplyDelete
  3. Thankxxxxxxxxxxxxxx Buddy Its Too Important For Me......:)
    onsecrethunt.blogspot.com

    ReplyDelete
  4. Sir I follow Carefully your Instruction But When I save it thier is error, just like this: More than one widget was found with id: HTML4. Widget IDs should be unique.

    Sir I need your help of this

    Thanks

    ReplyDelete
    Replies
    1. in u r blog template same HTML4 two widgets are there, so u need change the number(u can put any number like HTML10, HTML30)

      Delete
  5. Most welcomed brothers. It gives me great pleasure that you found it useful. :)

    @swordleaves
    I have updated the code in step#5. Use it now. :)

    ReplyDelete
    Replies
    1. Please I need help from any one that could, I really need this help: I want to add two/ double banner ( after blog description ) bellow my blog description... Please I really need this help from any one that could... Forward the steps on how to add or do it to my e-mail adsenyinnayaemma@gmail.com

      Delete
  6. I was searching for this for a long time. Finally found it. I followed the steps correctly but after saving the template my header title goes upper with the pages menu. How can I solve this???

    ReplyDelete
  7. Please I need your help, the read more instructions has been added quite in my blog but it showing at the end of my post, instead of jumb break please help me.

    ReplyDelete
  8. Mohammad, I'd like to know how to create the "Subscribe now", /RSS/G+/FB/Twitter and email sign up box, like the one you have (top right under the custom search box). Thanks! If possible, email me.

    ReplyDelete
  9. thanks mohamed nice post
    hichem

    ReplyDelete
  10. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "div" must be terminated by the matching end-tag "

    i use this template in my blog , please can you help me mohamed
    http://www.deluxetemplates.net/2009/08/typography-blogger.html

    ReplyDelete
  11. @Mohammad Bhai
    Great Tutorials
    Really Help Me To Increase Knowledge :)

    ReplyDelete
  12. @Lasith
    Always mention your blog url while posting a query brother so that I could see the problem.
    For aligning the title position edit this part of code

    .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;
    }

    The margin and padding positions your title.


    @Godwin
    Please read this tutorial How to add Read more link and then read this one -> Create Wordpress type subscription form

    @
    Try this code instead for step#5 and tell me if it works. You need to have some knowledge of div tags in this tutorial brother.

    <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 undefinedHeader)' type='Header'/>

    </b:section>
    </div>

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

    @osho
    My pleasure buddy. You are always welcomed here. :)

    ReplyDelete
  13. can't do it , i have the same error

    ReplyDelete
  14. @Admin
    As I mentioned earlier this tutorial requires a little HTML div tags knowledge on readers side. We though do it ourselves as premium service.

    ReplyDelete
  15. It not working in my blog http://gulmiresunga.blogspot.com.
    When i put a code and minimize my blog into half the page and the labels links also moves down.Pls help me

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. Excellent information., your site gives the best and the most interesting information. This is just the kind of information that i had been looking for.., I'll go ahead and bookmark your site to return to the future.. THANKYOU
    Regards:
    English Songs Free Download

    ReplyDelete
  18. very inoformative post, Mohammad Bhai, Thanks for sharing.

    ReplyDelete
  19. Al Salamo 3lykom
    I've a problem with my blog .. I want to change the direction from left to right because my blog is written in Arabic .. I change all the blog but I can't do it with the tabs " the menu of the blog pages under the header " .. I don't know what's the wrong .. so I will be grateful if you helped me changing It

    Regards
    Muhammed

    ReplyDelete
  20. assalam o alikum mr Mohammad Mustafa
    I followed the steps correctly but after saving the template my header title goes upper with the pages menu. and it looks unaligned.
    chek my blog
    www.engineersdaily.com
    Regards

    ReplyDelete
  21. NOT WORKING CANT FIND ANY OF THE CODE ON MBT CHURCH THEME

    ReplyDelete
  22. @admin
    I am not able to implement this trick on my blog http://www.todaystrendyblog.com/

    Any help would be appreciated :)

    ReplyDelete
  23. Hello sir when editing html code i found this code below


    .header-outer {
    background: $undefinedheader.background.color) $undefinedheader.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;
    }

    .Header h1 {
    font: $undefinedheader.font);
    color: $undefinedheader.text.color);
    text-shadow: $undefinedheader.shadow.offset.left) $undefinedheader.shadow.offset.top) $undefinedheader.shadow.spread) rgbaundefined0, 0, 0, .2);
    }

    .Header h1 a {
    color: $undefinedheader.text.color);
    }

    .Header .description {
    font-size: $undefineddescription.text.size);
    color: $undefineddescription.text.color);
    }

    .header-inner .Header .titlewrapper {
    padding: 22px $undefinedheader.padding);
    }

    .header-inner .Header .descriptionwrapper {
    padding: 0 $undefinedheader.padding);
    }

    and i have replaced it with your given code, but look at the code below i try to find the second code but they
    are something like this how should i replace them with your given code i tried so many times but unable to process

    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    </div>
    </header>

    <div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
    <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
    <b:widget id='HTML8' locked='false' title='' type='HTML'/>
    </b:section>
    <b:section class='tabs' id='crosscol-overflow' showaddelement='no'>
    <b:widget id='Header1' locked='false' title='Android-tweak Free APK Download undefinedHeader)' type='Header'/>
    <b:widget id='HTML2' locked='false' title='' type='HTML'/>
    </b:section>
    </div>
    </div>



    please help me sir

    ReplyDelete
  24. Assalam-O-Alaikum Brother When That Above Code Was Not Found In Blogger 2012 Template Simple template. Powered by Blogger. SO What Can I Do...???
    Reply Me Must Thanks

    ReplyDelete
  25. That is not working for my site http://www.myblogtips.org/ i want to split my header can you give me any info ? i will you my computer from teamviewer please help

    ReplyDelete
  26. Looking cool after implement on my blog my blog looking very impressive and i just do it while reading your seo help article now i hope you well tell about how to split in three parts. I will wait for this. Thank you for the post.

    ReplyDelete
  27. sorry the above code was not founded on new blogger templetes

    ReplyDelete
  28. very nice coded nice work or me..Lotss of thanks !!
    @ http://www.facebook.com/TricksGator

    ReplyDelete
  29. awesome.
    Thanks from www.ncooltips.com

    ReplyDelete
  30. thanks. but please how can i get this template of your.

    ReplyDelete
  31. i didnt find the code from step one can you help me sir ?

    ReplyDelete
  32. This is a very helpful tip for blogger. Thanks for sharing How To Divide Blogger Header In Two Parts

    ReplyDelete
  33. Hi
    i got only this types header wrapper
    Plz guide me what i can do now ?
    #header-wrapper {
    background: #181818;
    padding: 28px 42px 16px;
    float: left;
    position: relative;
    z-index: 1001;
    min-width: 165px;
    min-height: 54px;
    max-height: 54px;
    }
    .header {
    float:left;
    max-width:257px;
    }
    .header h1.title,.header p.title {
    font:normal bold 35px Fjalla One, Arial, Helvetica, sans-serif;
    margin:0 0 0 0;
    text-transform:uppercase;
    color: #fff;
    }
    .header .description {
    color:#555555;
    }
    .header a {
    color:#333333;
    }
    .header a:hover {
    color:#999;
    }
    .header img {
    display:block;
    padding: 0px 0 39px;
    }
    www.fastnepal.net

    ReplyDelete