How To Divide / Split Blogger Header Into Two Parts

How about if your blog has an AdSense ad in the header section? Experts are always recommended an AdSense ad on the header section of your blogger blog. They also say that an AdSense ad on the header section always increase more revenue than other part of your blog. So it is highly recommended to have an AdSense ad on the header section. Don't worry! If you do not have an AdSense account then you can use other advertiser's code to display their ads on the header section.

By default a blogger header has only a single section that appears left side at the top of your blog. Normally header section contains blog title, logo and description of your blog. Most of the templates are designed and developed by different developers so the coding are different a little bit but the format is same for all templates. And this is the most important section where you need to concentrate a lot. Although default blogger header has only a single section but you can customize the header according to your requirement. If you are an expert you can slice the header section twice, thrice sections. Read also : how to add AdSense ad below blogger post title.

In this tutorial, I will show you how to divide / split blogger header section into two parts so that you can add a gadget to your blog. So lets start!  

Important Note! 

Always remember one thing. Before changing or doing anything with template or uploading a custom template, always take backup of your blog's template and your blog's data as well. It helps you to recover your blog data and template from an unexpected error.

How To Download Blogger Template
How To Download Blogger Data

Steps to Divide Blogger Header

Step 1. First login to your blogger account.

Step 2. Click Template which located left side

Step 3. Click Edit HTML

Step 4. Once you click Edit HTML, you will able to see the codes of your blog's template. Click anywhere inside the codes

Step 5. Press Ctrl + F on the keyboard to get search box.

Step 6. Type <a expr:href='data:blog.homepageUrl'>
inside the search box and hit Enter (twice) on the keyboard and you will switch to that code. After that you will see the codes like below code

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
        </b:widget>
      </b:section>
    </div>
    </div>

Step 7. The code may differ slightly for different blogger templates. But no need to worry. Just proceed to the next step.

Step 8.Now you need to paste the below code in between   </b:section>
  and   </div>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Now the final code looks like below codes

<a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
    </div>
    </div>

Step 9.  Now type  ]]></b:skin> in the search box and hit Enter on the board to switch to the code. And just above ]]></b:skin>    paste the below code.
#header, body#layout #header {width:40%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:48%;display:inline-block;float:right;padding:20px;}
#header-right .widget {margin:0;}
After that final code looks like below codes

#header, body#layout #header {width:40%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:48%;display:inline-block;float:right;padding:20px;}
#header-right .widget {margin:0;}<
]]></b:skin><

If the width of your entire blog is 1020 then the above value suits for you. Otherwise for fine adjustment you need to change the above value in red colour.    


Step 10. Click Save template to save the template.

Step 11. You will see Add a Gadget just below your blog's header. Don't confuse that the header doesn't look in two parts in the Layout. Click Add a Gadget to add your desired widget. And after that click Save arrangement to save the Layout. Read also : How to track lost/stolen mobile phone and erase data remotely.

Thanks for reading the post. Let me know whether you have divided your header section? Also let others to experience this feature by sharing this post on the social networks.
How To Divide / Split Blogger Header Into Two Parts How To Divide / Split Blogger Header Into Two Parts Reviewed by Mani on May 18, 2014 Rating: 5

No comments:

Powered by Blogger.