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

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 »

27 comments

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. very inoformative post, Mohammad Bhai, Thanks for sharing.

    ReplyDelete
  16. 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
  17. 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
  18. NOT WORKING CANT FIND ANY OF THE CODE ON MBT CHURCH THEME

    ReplyDelete
  19. 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
  20. 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
  21. sorry the above code was not founded on new blogger templetes

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

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

    ReplyDelete