How to Divide Blogger Header In Two Parts

How to Divide Blogger Header In Two Parts

PAKLeet.BlogSpot.Com

Hello Friends, How Are You All, I Hope You'll Fine, I Am Here With A New Tutorial/Method..... 

•  How To Divide Blogger Header In Two Parts

At the top of all Blogger Blog, header consists of an individual section which contain your blog site logo or contain your blog site title as well as description a great number of peoples are generally don’t just like these sort of header and want to add some kinds of ads or any widget beside the header.
Today we will likely to show you a solution to split header into two elements. Here you simply need to make many changes with your template and you can done it in only few seconds and then your blog header will be divided in to two elements and left side contain your blog little logo as well as in right side contains your specific widget which can be 468x60 ad banner. So let start the tutorial.

How to Divide Header:

1. Go to your blogger dashboard >> Template >> Edit HTML

2. We will add a new section in the header. To do so, find the following piece of code: (Press Ctrl+f and copy the code in the box that appears)

 <a expr:href='data:blog.homepageUrl'><data:title/></a>

Once you find the above code, you will see something like this:

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

Note: The code may be slightly different for different Blogger templates. Don't worry though, move on to the next step. 

3. Paste the following code between </b:section> and </div>

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

So the final code will look something like this:

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

4. We have successfully added a new section. Now we need the widget to appear besides your blog's title (right-oriented). We will achieve this with the help of CSS. Copy the following code and place it before/above ]]></b:skin>

 #header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

For fine-adjusting of the widget's position, edit the code highlighted in blue. Try with diferent values if you want to change.
5. Hit Save template.

Now Go to Your Blog's Layout Tab and you will watch a HTML/Javascript widget below the header. Edit it and add any code you want to display beside the header. In Layout this Widget appears below header but it shows beside the header as below:

PAKLeet.BlogSpot.Com

Final Words:

This is a very useful tutorial for almost every blogger to divide their blogger blog's header into two parts. You can place any ad unit or anything you want to display along with the header. Now It's your turn to share this post and write your views in comments till then Happy Dividing.