Auto insert Ads after Paragraph & Heading Tags in Blogger/Blogspot

Advertisement

Auto insert Ads after paragraph or Heading Tags in Blogger – Add Ads after Various Tags in Blogger. Today in this story you are going to learn how you can add advertisement on your blogger blog. We just drown our foot into something cool. Here is how you can setup your ads to show after a Tag automatically. These tags are working fine paragraph tag, heading tags H2/H3/H4. Mean after you follow this guide, your ads will load automatically inside your blogger posts. I think I did enough to tell you about this article. Adding Adsense ads between blogger posts automatically was never been this easy. Now we are near to have similar ads placement in blogger if compared to WordPress.

Add Adsesne between blogger posts auto

Earlier we covered adding ads between blogger posts automatically. In this tutorial, we take care of complex things and compressed hard sentences into understandable one. Which means you will able to add any adverts in every post automatically.  Such as after first, second, third h2 /h3/ h4 tags or After first, second, third paragraph – much possibilities.

We will guide how you can set displaying Adsense or other ads automatically between of post. You can choose where such as,

› Just after the first paragraph.

After a specific number of a paragraph. i.e. after 2nd or 3rd paragraph.

› After Heading tags ( H2, H3, H4)

You can set this numbers too, i.e, to show at the second H2 tag.

To doing this just follow steps below.

How to Display AdSense Ads just after the First Paragraph

 

Follow these steps to get it done.

Step 1. Sign in blogger.com opens your blog on which you want to place Ads between in post. Navigate to Template and Click EDIT HTML option. It will open blogger HTML Editor now press CTRL+F and search <data:post.body/>

Keep in Mind – That You will find many <data:post.body/>, Find the Second one. And if this didn’t work, you need to find the correct Tag, by checking other <data:post.body/> Tags. In some templates, it is near to tag itemprop=’articlebody’>.

If you still can not find the right Tag, Make a comment below and we’ll look for the correct code of your blog template.

Step 2. When you find that Tag, replace that with the following code:

<div id='quickfever-target'><data:post.body/></div>

[example] 

Before: <data:post.body/>

After: <div id='quickfever-target'><data:post.body/></div>

Step 3. Now visit your advertisement network, (like if you are using Adsense to generate revenue) and copy any Ad code and convert into plain html now copy converted Ad code and replace “CONVERTED ADS CODE HERE” text with it – in the below code.

Now you need to copy below code and place it just before <div id=’quickfever-target’><data:post.body/></div> line.

Displaying/Align Ads on the Left Side.

<div id='quickfever-content' style='display: inline-block;float: left;margin: 0 15px 0 0;background: #fff url(http://i.imgur.com/mBbv90p.png) no-repeat top right;padding-top: 9px'>CONVERTED ADS CODE HERE</div>

Change float: left to right or none to align it differently.

Undrestanding this Code, And Customizing it.

float: left– This CSS used for displaying ADS as center,
You can replace left to right (if you are using 300×250 or similiar size Ad unit) use center if you are using banner size Ad-unit.

margin: change the value to make a space between post content and Ad.

example of right side Ad margin [margin:10px 10px 10px 10px;]
this will result a space from every side.
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

Like if you are set Float: right setting you need to change its opossite side magin code (margin-left) to atleast 15px to be safe.


To be safe, use advertise tag with ADS.

background: #fff URL(PASTE YOUR CUSTOM IMAGE TAG) no-repeat top right;
padding-top: 9px
use this to correctly display the advertising image above Ads.
top right – change it to ‘top left’ to display the advertising tag on the right side of the Ad.

Screenshot of what it will look like in you template – example:

Step 4. last, right after <div id=’quickfever-target’><data:post.body/></div>  (step 2), place this script to load the Ads.

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;quickfever-content&quot;);
var target = document.getElementById(&quot;quickfever-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

 

How to Display AdSense Ads after H2, H3, H4 Tag

If you would like to insert/add after a number of paragraphs like after 2/3rd, 4th you just need to change ‘0‘ to any number e.g. 2/3/4

Step 5. Click “Save template” to save the changes and you’re done.

With this trick, you can insert AdSense after the first paragraph automatically in Blogger with ease. Now it’s your turn to decide which format works best on your site.

Example of Full Code

If you want a ready-made script that you just need to replace with <data:post.body/> and replace “CONVERTED ADS CODE HERE” with converted Ad code

Adsense Ad aligned RIGHT and show after H2 Tag / Advertise tag just to be safe.

<div id='quickfeverads-content' style='display: inline-block;float: right;margin:40px 0 0 10px;background: #fff url(http://i.imgur.com/mBbv90p.png) no-repeat top right;padding-top: 9px'>CONVERTED ADS CODE HERE</div>
<div id='quickfever-target'><data:post.body/></div>
<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;quickfever-content&quot;);
var target = document.getElementById(&quot;quickfever-target&quot;);
var linebreak = target.getElementsByTagName(&quot;h2&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>
So this is how you gonna generate revenue according to your site’s max potential. We demonstrated Adsense you can also try these Adsense alternatives and can read about AdSense approval and tips here. To add more than one ad unit, double the script with different tag name.

If you want any kind of help regarding this article, comment below. 🙂

More Blogger Articles and guide.

Advanced Blogger SEO & Ranking techniques to Boost almost everything (Blogger.com)

Adding Blur, Fog Effects to Blogger/Blogspot Images, Using image URL Parameters

→ This is new tip we spotted, first only on Quickfever.com

→ Bored with the default blogger comment system, try out these comment systems installable to blogger.

Auto insert Adsense Ads by First Paragraph or H2 Tag in Blogger Blog

Blogger’s official Featured Post Widget Launched

Learn Blogger Limitations – Complete List of Blogger Limits

How to Make HTML Sitemap Page in Blogger Blog (Various type and styles)

Add adsense Ads Middle of Blogger | Each Post Automatically

3 comments
  1. Greta post i ever seeing on your blog. Recently i was searching for that how to implement ads after 1st paragraph of blogspot blog & i landed here on this post,,,, thank you so much for guiding here to all newbies.

  2. Nice post, I will apply this to my blog (I used media.net) you solved my problem with this post. Keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *