Facebook twitter instagram

check our other website BRAG.LIFE for more 18+ Stories, Action, Love&Romance, Pain&Agony, Horror Stories e.t.c just click here

How To Add Adsense/Affiliation Code To Blogger Posts Using New HTML Template Editor 2021
By on September 5th, 2021. Technology

How To Add Adsense/Affiliation Code To Blogger Posts Using New HTML Template Editor 2021

Adding Google ads inside Blogger posts is highly recommended if you really want to get the maximum clicks on your ads. There is no way someone will read your blog post without seeing the ads, be it under the post title or immediately after the blog post.
The Adsense ad at the top of my blog posts is the best so far; even earns me more money than the 728×90 leatherboard ad unit. So, if you are yet to insert Adsense ads inside your Blogger post, try to do so and see if your Adsense revenue will increase or not.

Placing the Google ads inside your blog post is not possible without having to edit your blog’s HTML template. You cannot insert the ads with Blogger widgets just as you do on the sidebar, header or footer sections of your blog. Even if you place the ad codes in the wrong location in your HTML, the ad will not display when you view your blog. 

Today, I am sharing with you, the correct way of adding Adsense ad codes inside your blog posts using the new Blogger HTML template.

READ ALSO: How To Use The New Blogger HTML Editor 2021

How To Get Started

==> Log in to www.google.com/adsense or The Affiliation Marteting programm
==> Click on “My ads” tab
==> Click the “New ad unit” button
==> Select the 300×250 Medium rectangle ad size
==> Fill other options, save and get your ad code.

READ ALSO  Three Ebonyi teenagers narrate how they were trafficked to Ghana and forced into prostitution

Now, we need to parse the ad code.

==> Go to http://www.freehtmlparser.blogspot.com/
==> Copy and paste your ad code inside the box and click the “Encode” button
==> Copy and paste the code somewhere eg in a notepad

Now you will add your parsed code in the codes below before using it in your blog’s template.

==> If you want your ad to display at the center inside your post

    <b:if cond=’data:blog.pageType == “item”‘> 
    <div style=”text-align:center;”>
    Paste your parsed adsense code here

==> If you want your ad to display at the left side inside your post

    <b:if cond=’data:blog.pageType == “item”‘> 
    <div style=”float:left;”>
    Paste your parsed adsense code here

==> If you want your ad to display at the right side inside your post

    <b:if cond=’data:blog.pageType == “item”‘> 
    <div style=”float:right;”>
    Paste your parsed adsense code here 

The codes above are conditional tags that restrict the Ads to post pages ONLY.

==> After adding your parsed codes inside the conditional tags above, copy and paste it somewhere. The customized code is what you will paste in the template.

Now, we need to add it to the new blogger HTML template

==> Log in to www.blogger.com
==> Go to “Template” > “Edit HTML”
==> Once the HTML loads successfully, click inside it
==> Press CTRL F on your keyboard to bring up the “find” box as seen below


==> Copy and Paste <data:post.body/> in it and hit the ENTER key on your keyboard. This will help you locate the code in the HTML.

READ ALSO  Three Nasarawa lawmakers escape assassination attempt

The code might appear more than once in your HTML. So, click inside the find box and hit the ENTER key again. You will know if it appears more than once if you look closely at the corresponding “line number” on the left side of the new Blogger HTML editor as illustrated below.

line number

Now place your Adsense customized code in this way:

If you find <data:post.body/> more than once in your template, paste your Adsense code above the SECOND and THIRD <data:post.body/> if you want your ad to be displayed below the post title/at the top of the post.

If you want it to display after the post, paste the code below the second and third <data:post.body/>. Alternatively, you can find the second <div class=’post-footer’> and place the ad code directly under it. You can also place it under <div class=’post-footer-line post-footer-line-3′>

Save your template and view your blog. The ads should appear in your post.

NOTE: Only three ad units can be displayed per page. So, if you already have three ads units on your page, the ad in your post might not display.

I hope this helps.

Questions? Contributions? Kindly relay them via comments.

About Author

Coolstories is one of the leading Entertaining Website, We Gossip, We Entertained, We Educated, Read all our 18+ Stories, Love & Romance Stories only on Coolstories... Don't forget to join our Forum.

2 Comments Drop Comment

  1. Clinton Classic - Sep 8, 2021

    I don’t understand it that much please help me

  2. Coolstories - Sep 8, 2021

    Hello Clinton Classic,

    please kindly indicate where you don’t understand, for us to know how we can help.. where are you finding difficult? kindly drop your complaint for us to assist you.


Leave a Reply

NOTE:- Your comment will appear after it has been approved by an admin.

Ads Blocker Image Powered by Code Help Pro
Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us we the Coolstories Team by disabling these ads blocker.