Put Adsense Below Blogger Post Title Without Converting Code
Google Adsense is the most wanted contextual advertising programs on the internet. It serves content related and interest based advertisements which can engage web visitors on Google Ads.
But, here a publisher also needs to place Google Ads in proper places where it gets noticed by the users easily. Google also recommended some best placements for blog optimization (See Here).
To improve your CTR you should place one Ad unit into content under the post title.
The Blogger users can not place Adsense Ad into all blog contents (just below the title) directly unless it converted into XML format. Because, Blogger template is in XML format and Adsense code is in JavaScript.
But, here is still a little problem. Google clearly said that- Modifying Adsense code is a violation of Adsense TOS. Although converting Adsense code into XML format (that blogger can read and display Adsense ads properly) might not be a violation of Adsense TOS, still then there is a risk factor (especially for the new accounts)!
But, here a publisher also needs to place Google Ads in proper places where it gets noticed by the users easily. Google also recommended some best placements for blog optimization (See Here).
To improve your CTR you should place one Ad unit into content under the post title.
The Blogger users can not place Adsense Ad into all blog contents (just below the title) directly unless it converted into XML format. Because, Blogger template is in XML format and Adsense code is in JavaScript.
But, here is still a little problem. Google clearly said that- Modifying Adsense code is a violation of Adsense TOS. Although converting Adsense code into XML format (that blogger can read and display Adsense ads properly) might not be a violation of Adsense TOS, still then there is a risk factor (especially for the new accounts)!
 |
| Image by- Google.com |
So, it’s the best idea to put Adsense ads below blogger post title without converting the code.
Placing Adsense into blog content/ below post title;
Here is no need to create Adsense Unit. Just follow the steps below-
Note: To use this process, you should keep only one Adsense banner ad in your template. Other two banners will be created by this process. Because only three banner units can be placed on a page.
Layout modification:-
- Go to the Blogger Dashboard and click- Layout.
- Click on Blog Posts “edit” to configure blog post.
- Now click “show ads between posts“. See the picture.
- Click “Save” icon to complete the process.
Template modification:-
- Go to the template section and back-up your template first
- Click “Edit HTML“.
- Find <data:post.body/> using keyboard short cut Ctrl+F.
- Paste the code below just above the <data:post.body/> (above the last two).
The Ad Code:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<div style='float: left; margin:10px;'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>
Note: <data:post.body/> will appear three times in your blogger template. You should paste the code above the last two where your ‘post-body entry-content’ with- itemprop=’description articleBody’, and itemprop=’articleBody’ attributes respectively.
Because, some posts on your blog are under attributes- itemprop=’description articleBody’ and some are under- attributes itemprop=’articleBody’.
Final coding will be like that-
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<div style='float: left; margin:10px;'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.includeAd'>
<div style='float: left; margin:10px;'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</div>
</b:if>
</b:if>
<data:post.body/>- Now save your template and check your blog live.
Moving Ad Left/Right and Middle of the title and content:
No 1#. To move left edit the third line of the ad code (like the first picture). Write the line as-
<div style=’float: left; margin: 10px;’>
No 2#. To move right edit the third line of the ad code. Write the line as-
<div style=’float: right; margin: 10px;’>
No 3#. To put ad between post title write the third line as-
<div style=’text-align: center;’>. Here the attributes- ‘text-align: center;’ is represent your ad in the middle position. you can move left/right by writing “left” or “right” in place of “center” of the code. See the picture-
 |
| by- creasysolve.com |
If you have any problem then please don’t forget to leave a comment!
Related Posts:
© copyright 2018 – All rights reserved
November 26, 2014 @ 9:39 am
Hi Majharul,
Thanks for sharing the nice tutorial. I'm searching something like this from last several days because I also want to integrate Adsense code in my blogger blog.