How to Split Header in Two Columns to Get 2 "Add a Gadget" Sections?

Filed Under : ,

Hi bloggy reader
Many bloggers utilize the top position of their blogs mostly for the header element. That's because header is the first part that search engine will reach to your blog at the first time. But, in some cases, i always see blogs that split headers in two columns and deploy some advertisement banners in that area. Well, it's fine if you want to split header and inundate that area with anything, but you must be very careful in adding lots of elements or widgets on the header position, because it might burden Googlebot when crawling to your blog.

Okay then, in this post, i would like to discuss about how to split header in 2 parts or 2 columns.

In order to begin this article, i want to tell you first that i'm currently using Minima as a testing template in this split header tutorial. So i strongly suggest you to pick Minima or Rounders as a basic template for testing if this split header tutorial might work for you or not. Okay, without further long introduction, here you go, Enjoy!

1. Login to your blogger account.
Now go to Blogger.com and start typing your username along with the password to log in to your Blogger account.

2. Go to Layout/Design.
In the Dashboard page, Go to Design/Layout on your blog. After pressing the Design/Layout button, you will be brought to the new page where in the top navigation, there are 3 main sub-tabs below the Design/Layout tab. Now click at the sub-tab called Page Element (which is already in the default position of Design/Layout tab, so actually, you don't need to do anything).


3. Check the header element of your current blog.
Now in the Page Element, you are given a full authority on customizing your blog layout. As you can see in the picture below, the header element is indicated on the top position of blog layout. Below the navigation bar (Page element, Edit HTML, Template Designer) and over the post element/article element (See the picture below).

split header

4. Go to Edit HTML
Still in the Layout/Design tab, Now start editing your current blog template by pressing the sub-tab "Edit HTML" to go to the Edit HTML page

5. Find the CSS styling to split header in 2 parts
After landing to the Edit HTML page, by pressing Ctrl + F on your keyboard, you can now start finding the code that defines the header element of your blog. Now press Ctrl + F to enter the find mode (As you can see in the bottom position of your browser, when clicking Ctrl +F, you will be given a Search navigation bar):
/* Header
---------------------------------------------- */
#header-wrapper {
  width:760px;
  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;
}

6. Replace that code
Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case if later, you did something wrong with the template. Now click at the link Download Full Template.

split header

Now block the whole CSS styling above (on number 5) with the mouse cursor and then replace those header CSS using the code below in order to split header in 2 parts:
/* Two Column Header Layout
=================================== */
#header-wrapper {
width:800px;
margin:0 auto 0px;
background:white;
height:190px;
}

#head-inner {
width:500px;
margin-left: auto;
margin-right: auto;
float:left;
background-position: left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#second_header{
width:300px;
float:left;
padding-top:10px;
}

7. Find the code that defines the HTML code for header
Ok, now proceed to the next step. Scroll down to the bottom of the HTML code and by pressing Ctrl+F, find the code below:
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section>
    </div>

8. Replace the whole HTML code that defines the header element
Now by using your mouse cursor, block the whole code above and replace it with the code below:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='second_header'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Save the change
OK, Now you are done. Save the change by pressing the Save Template button. To see the result, go to Page Element again and now you can see that your blog header has been split in two header parts.

split header

Okay then, that's it for now about how to split header in two parts. If you have something to ask to me, just type your question on the comment section below and i'll try my best to give you the answer sooner.

Okay, I'm Out...

Filed Under : ,
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh updates from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

7 comments:

Tree said...

Another great code! Thanks again!

Varinder Pal Singh said...

Thanks Great Hack...........

Very useful for me.........:)

English Songs said...

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

Arief Iwan Cahyono said...

benar-benar bagus artikelnya, maaf bahasa indonesia

al said...

very useful article, thanks!!

blog walking
My Tech Blog

Rebecca said...

Hmmmm...I don't have header-wrapper in my code. Has something changed recently? Thx.

Harish said...

The above mentioned method used to work for the older templates, but for new templates, the above mentioned code does not even exist neither do the div part!
Can you write the similar posts for new blogger templates like Live on Blog or the others?

Post a Comment

Copyright © 2013 Whatmakesblog.com All Rights Reserved. Reproduction in whole or in part or in any form or medium without written permission is prohibited.
Web Theme Designed by Daniel Likin
Disclaimer | Privacy Policy | Contact Us Google Analytics Alternative