Thursday, 19 July 2012

How To Place Adsense ads Below Post Title in Blogger

This tutorial is dedicated to Adsense Publishers. Many of them asked me on how to place the Adsense ad below the title of the Blogger post.

Everybody on the Internet world owning a website love to earn some money from Adsense ads. People are finding various ways daily to get good click through rate for their ads placed on their website. Some people already know the trick in the ad placement. Some do not know where to place their Adsense ads.
I see that some people place their Adsense ads under the footer, which is of no use.

Before we hang on with the tutorial, I would like you guys to know the heat map for Adsense ad Placement as shown below:



Red - The red box above the post content is where we are going to concentrate on in this post. Best place to place your ads to get lots of clicks including accidental clicks. (BELOW TITLE/BELOW NAVIGATION BAR).

Pink - These boxes are good enough to get some clicks.

lightest pink(grey)- These boxes do have some click possiblities but not as good as red and pink.
Other places do not have any click possiblities like below the footer, under the right sidebar, top right corner on the header.

To know more on the heat map, please refer to Google's original heat map.


Important: You need to generate the ad code from Adsense beforehand. I've already taught the tutorial in the last post on how to generate an Adsense ad code from Google Adsense and along with encoding the Adsense ad code using the Adsense ad code converter.


Items Required:
1. Adsense ad code converter or generator to encode the Adsense code.
2. Converted Adsense Ad Code.
Tutorial to place the Adsense ad below the post title:

1. Once you have got the converted code from the Adsense Code Converter, we are ready to proceed for the next step.

2. Log in to BLOGGER DASHBOARD > Select the Blog > Template > Edit HTML > Expand Widget Template.

3. Search for (Ctrl+F) - <p><data:post.body/></p> or<data:post.body/>
Just above it place the converted Adsense Ad code. You can preview the ad before saving. Save the Template. You are done!!
Note:There can be 2 TO 3 codes like <p><data:post.body/></p> or<data:post.body/> in the html code check and test at all places.
probabilly at first code its self will work.


What Happens Now?


The ads will start appearing on your landing home page, under the post titles. If you have set more than 3 posts to be displayed under your home page, then the 4th post will have some blank spaces making it look ugly. Adsense policy says that you can only have 3 ads displayed per page.
There are bloggers out there who put the ads only in the individual article landing page.
How to implement the trick?

We now need to display the ads under the post title only in the article page.
To implement the trick you need to modify the converted code in the red area

<b:if cond='data:blog.pageType == &quot;item&quot;'>Encoded/Converted Adsense Ad code here</b:if> Place the above code just above <p><data:post.body/></p> or <data:post.body/>


The final code should look like as shown below:



<b:if cond='data:blog.pageType == &quot;item&quot;'>Encoded/Converted Adsense Ad code here</b:if> 
<p><data:post.body/></p> 

Save the template!!! View the ads only on the individual post articles.

How to Float/Blend the Adsense Ads on the Right or Left of your Text?

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;padding:5px;'> 
Encoded/Converted Adsense Ad code here
</div> 
</b:if>



Place this just above <p><data:post.body/></p> or <data:post.body/>

Change value Left to right to make the ad float on right side of the text in every post page.
It is the best your ads in each post instead of placing them in the front page for better click through rates. 

Hope you enjoyed this tutorial. If you have any questions or any other suggestions, please let me know would love to include that too for our readers.

No comments:

Post a Comment