Add Extra Columns in Your Blogger's Blog Header

You might see that some blogs or sites are having extra columns in their blogger blog's header. Some of those blogs or sites are using the extra columns of their blog's header to sell advertisements to make more extra income from their blog while some other bloggers are using the extra blog's header columns to place navigation bar for their blog or they will use the extra blog's header columns to place the "Subscribe to the Feed".

So, if you are looking for the way to ad extra columns to your blog's header, this post will be helpful to you. I have written down the steps to do to create columns in your blog's header.

The picture above shows the blogger blog's header after modified.

Note: Please note that not all blogger's template can be modified using the same method as describe below. I am sure that the methods below are suitable for minima templates. The steps mention below can be used for blogger's templates with the "header-wrapper" code.

Step-by-step Guide:
1. Login to your blogger account. Then, go to "Layout">>"Edit HTML". Now, Do Not Choose "Expand Widget Templates" and look for the code below:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

2. Then, replace the codes above with the codes below:

#header-wrapper {
width: 660px;
border: 1px solid #000000;
margin:0 auto 10px;
border:1px solid $bordercolor;
clear: both;
word-wrap: break-word;
overflow: hidden;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
width: 400px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header-right {
width: 220px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-top {
padding: 0 5px 10px;
}

#header-right-bottom-section {
padding: 0 5px 10px;
}

#header-right ul {
margin: 0;
padding: 5px;
}

#header-right ul li {
display: inline;
padding: 5px;
}

#header-right-bottom {
width: 220px;
float: right;
border: 1px solid $bordercolor;
color: $pagetitlecolor;
margin: 5px;
}

#header-right-bottom ul {
margin: 0;
padding: 5px;
}

#header-right-bottom ul li {
display: inline;
padding: 5px;
}

The codes above might not match the width of your blog's template. So, place make some modification to the width so that it matches your blog. The width that you might need to change is #header-right-bottom, #header-right, #header and #header-wrapper. Remember that #header-right-bottom and #header-right should be of the same width to prevent out-of-shape blog's header.

3. After pasting the codes above, now you need to find for the codes below:

4. Replace all the codes in step 3 with the codes below:

5. Now, you have completed all the important steps. So, you will need to click "SAVE TEMPLATE" to save the changes that you made.

Done. Now, you have successfully modified the your blogger blog's header. You might want to firstly "Preview" the changes before clicking the "SAVE TEMPLATE" button. After you save everything, your blog's design will look like the picture shown.

Enjoy.