How to Place Adsense Ads Below Post Title


Beneath the seeming maze of the blogger’s xml template code, there is a pattern you need to understand for best arrangement and placement of blog components such as adsense and other ads and banners, this post will show you how to make your advert code to appear below the post title on both mobile and desktop view just as on this page.

Click To Read About the typical experience of an average blogger

A good xml formatted template has a standard structure that its subunits are easily collapsible by blogger, bad structured template makes it difficult for search robots to crawl the content of your blog for the search engines.

Understanding the “includable” structure

The properties of each component of your blog layout are structured inside the “INCLUDABLE” syntax under the respective widget.
To view the whole structure concisely, locate the main-wrapper tag “<div id='main-wrapper'>”, all widget typically comes immediately below it. 

The first widget should be the “Blog1” widget; you can also access this by using the “Jump to widget” shortcut. Under it is the first includable id=main, you can collapse it to see the next “includable” and get the full layout of your blog1 widget.


Placing the Ads code on mobile post below the title


1. Backup your template first
2. Get your ad code ready and parsed. For best performance, create a 'sync' ad unit instead of 'async', this code is the best especially for mobile users on opera mini, it increase page load by fractions but it ensures that your ads are displayed.
You can get the ad code from adsense and parse it here to convert it to plain text for the blogger template.

3. Locate the tag “<b:includable id='mobile-post'
4. Go down to where you see “<div class='post-header-line-1'/>
5. Place your parse ad codes just below it
If you want it to be centered on the page just add the center tag.
Your code placement should be like this;
<center>
<!--Your parse ad code here-->
</center>
<div style='clear: both;'/>

To place add at the end of post, just above the comments section, locate the tag “<div class='post-footer-line post-footer-line-2'>” and place the parse code below it

6. Save your template and view the mobile version of your blog to see the result.

Placing the Ads code on desktop post below the title

1. Backup your template first
2. Get your ad code ready and parsed. You can get the ad code from adsense and parse it here to convert it to plain text for the blogger template.
3. Locate the tag “<b:includable id='post'
4. Go down to where you see “<div class='post-header-line-1'/>
5. Place your parse ad codes just below it
For the desktop view, you may choose to place it below the “post-author vcard” and “post-comment link
If you want it to be centered on the page just add the center tag.
Your code placement should be like this;
<center>
<!--Your parse ad code here-->
</center>
<div style='clear: both;'/>

6. Save your template and view the desktop version of your blog to see the result.



4 Comments

Questions, Tips, Appreciation? Please Comment, Thanks

Previous Post Next Post