Monday, July 7, 2014

How to make or divide header of Blog into two parts and fill the space with AdSense Ads

As you will see while we make a search on Internet that most of Blogger want to put their AdSense Ads on the top of their Blogs. So here we can learn that how it is possible to make it happen on your own blog and below are the step by step instructions which you can follow for your blog's header to divide it into two parts.

Step 1: Login to your Blogger Account.

Step 2: Go to your blogger dashboard -- > Template --> Edit HTML

Before you make the changes take backup of your blog

Step 3: Click on the Code and Press CTRL+F to find out below code. Put  <a expr:href='data:blog.homepageUrl'><data:title/></a> in the box and press ENTER.

Step 4: Put this code in the middle of </b:section> and </div>
 <b:section id='header-right' showaddelement='yes'/>  
 <div style='clear: both;'/>  

The final code will be like this:

Step 5: The other task is to place the AdSense Ad on the right side. So we will do rest of this work using CSS.
Copy the following code and place it before/above ]]></b:skin>
 #header, body#layout #header {width:15%;display:inline-block;float:left;}  
 #header-right, body#layout #header-right {width:75%;display:inline-block;float:right;padding:10px;}  
 #header-right .widget {margin:0;}  

The final code will be like this:
Note : You have to adjust both the width and padding according to your blog or site.

Step 6: Checkout your Layout Structure and choose AdSense Ads as your gadget.

 Click on Save arrangement and you are done.

Related Topics:

No comments:

Popular Posts