How to Insert Ads into Your Post Content in Blogger (Part 2)

48

AdSense in middle of the post – Blogger advanced practices: If you want to insert ads into your post content i.e. after certain paragraph, it is now possible on Blogger. Author “AJ Banda” created an awesome script to make it possible. This script actually looks for <br /> tags inside your post and displays ad unit. You can define a number of <br /> tag to display ad within your post content. A similar feature is already available for WordPress but Blogger is lacking for a long time but custom solution can help you.

Insert Ads into Your Post Content

Put Google Adsense in middle of post

What is additional?

1. Reduced the need for <br /> (line break) tags in his code and using CSS style “clear:both” for the same purpose.
2. Modded this code for center alignment by using HTML5 properties.
3. Add XML code which will load only on Blogger item page rather than loading on other pages to save your blog performance.

Injecting this code into Blogger theme

Now I will discuss how to install/ integrate/ inject this script into your blogger theme. (!) Must take backup of your template before making any change.

1. Find the <head> tag in your blogger template and place latest jquery just below it. Please avoid to use two jquery links, remove older one and use the new version.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>

2. Second look for this code <data:post.body/> inside Blogger theme and replace it with the following code –

<div id="PostBody">
 <data:post.body/>
</div>

<div id="AdCode">
<div style='margin:5px 0;text-align:center;clear:both;'>
 <!-- Ad Unit Code Here -->
</div>
</div>

New Blogger template may have 2 or 3 <data:post.body/> code. You should have to identify correct one. Generally 2nd instance of <data:post.body/> is right code to replace in new blogger templates.

3. Now search for </body> tag inside Blogger theme and put following javascript before/ just above it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
 $AdCode = $("#AdCode").html();
 $("#PostBody br:lt(1)").replaceWith($AdCode);
 $("#AdCode").remove();
</script>
</b:if>

4. Save the changes made in Blogger theme and have fun.

You can choose your Ad location –

By replacing the value br:lt(1) with br:eq(n), where n= 1, 2, 3… which is the number of line breaks after which Ad will appear in your post. e.g. If you want to show Ad after 5th line break then replace br:lt(1) with br:eq(5) and you are done.

Legal

As far as we know using this or similar script to insert ads within your post content is legal because most of the users who are using WordPress, Joomla etc. are placing ads with the help of similar scripts. It does not matter they are using PHP or javascript. The final choice is yours, you will use it for your blog or not.

GitHub gisthttps://gist.github.com/vinayprajapati/5893386

Reference –  ajibanda.com

Conclusion

After a long research and discussion, we find that adding Google Adsense code inside post body is possible with javascript. It is absolutely safe to use it. And we recommend Blogger to introduce such feature with Blogger by default in next version which is v3.

48 COMMENTS

  1. hello Vinay

    the tutorial is good and work perfect, but after one day i see the numer of request ads is much

    i search on Google and i find

    How to fix misconfigured ad request notifications

    but i dont understand what do exactly, you can help me!

    • Observe the ad requests for one or two weeks. This script just shows the ads in middle of posts there is nothing special in that. Please clear me about “misconfigured ad request notifications”… are you unable to use the script?

      • i do like this tutorial and its work up to there!

        misconfigured ad request notifications : for example i have 5.000 visitors have see my ads on website but on this unit ads i add on middle post show me 10.000 visitors!

  2. I’m using it and this is amazing! I’m writing from Italy and you are fantastic. One problem: is there a way to fix the bug that show the ads also at the end of the post? Thanks :)

  3. I’m utilizing it and this is astonishing! I’m composing from Italy and you are awesome. One issue: is there an approach to settle the bug that demonstrates the promotions likewise toward the finish of the post? Much appreciated :)

  4. I have applied everything but i have one suggestion for you.
    Try to show how to replace the ad code with the original adsense code.

  5. I have Placed my adsense code in the widget section it gas been week but its showing as the blank yellow space but its not still appearing what should be the problem , any suggestions please

  6. Hello thanks for the code. It really did me wonders, worked perfectly on the website.
    But I would like to insert two or more ads like on 3rd , 5th and 7th paragraph how do I do that with this code thanks

  7. Hello i added the code o the website and its working perfectly thanks for the code, but i would like to display the ads thrice inside the article. For instance on 2nd paragraph, 4th and 7th how do i implement it

    • Kar sakte hain, us tarah se agar aapko position badalani pade to sab post ko ek ek karke edit karna hoga.

  8. I place the code as describing but ads are not showing, any idea how much time it will take to show ads between post content.

    • i guess it will take 24-48hrs to activate the ads, even i just tried on my theyogatradition_blogspot_com/
      blog, hopefully waiting for results

  9. Hi,

    Do i need to paste the below code before

    $AdCode = $(“#AdCode”).html();
    $(“#PostBody br:lt(1)”).replaceWith($AdCode);
    $(“#AdCode”).remove();

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.