Guide to Split Blogger Header into two Column or Sections

Split Blogger Header into two column or sections is not easy. By default Blogger is not providing customization option to divide blogger's blog header into two column. If you know about CSS and bloggers widget sections, then you can customize it according you. Because blogger is providing very simple layout option to edit CSS and add additional widget area anywhere. A simple question in mind that:

Why people want to split blogger header into two column?

The answer is header of any website or blog is most profitable area. Adding Adsense ads in this area will boost your CPC and Clicks. In this area you can also add any widget as like search box, social share buttons etc. Just follow the simple steps to split blogger header into two column in easy way. I am also using this customization on this blog, where you are reading this article. Please take Backup of your template before doing any customization.

Step 1: Log into you blogger admin area and select you blog in which you want to apply this customization.

Step 2: Click on Template and After than Edit HTML (Dashboard >> Template >> Edit HTML)

Split Blogger Header into two Column

Step 3: Find the following code as highlighted in image in your template (Don't expend)

Split Blogger Header into two Column Step 3

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'>
      </b:section>

Step 4: Paste the following code just the below above code.
      <b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'/>
      <div style='clear: both;'/>

After doing it. Complete code should look like as highlighted in below image:

Split Blogger Header into two Column Step 3

Step 5: Now Find the code /* Header and you will see the following code as shown in image:

Split Blogger Header into two Column Step 5

You must replace the above code with following code and click on save template
#header {
float:left;
width:20%;
margin-top: 15px;
margin-left: 20px;
text-align: center;
header-text-color: $(header.text.color);
header-font:  $(header.font);
description-color: $(description.text.color);
}
#header2 {
float:right;
width:75%;
}

After that It will look like as shown in below image.

divide Blogger Header into two Column

Note: If you are getting any adjustment issue. Please change width, margin-top or margin-left according your blog size and click on save template.

You have done all the things to Divide or Split Blogger Header into two Column or Sections. Go to Layout option and add widget which you want as like Adsense, Social Share, Blog Search Box etc.

No comments:

Post a Comment