How To Divide Blogger Header Into Two Sections

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

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.

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. 

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.