Latest

Jul 20, 2017

How To Put AdSense Ads In The Middle Of Post On Blogger(Blogspot)


Adding Adsense ad at the top and bottom of the contents in your blog is really a smart way to maximize earnings. If you are finding it difficult to implement the codes in your html, follow the steps in this post. 

This post explains how to add the Adsense ad codes inside your blog posts using the Blogger HTML template

How To Get Started

==> Log in to www.google.com/adsense
==> Click on "My ads" tab
==> Click the "New ad unit" button
==> Select the 300x250 Medium rectangle ad size
==> Fill other options, save and get your ad code.

PARSE YOUR CODE

==> Go to html-to-xml-parser.blogspot.com
==> Copy and paste your ad code inside the box and clickout.
==> Copy the parsed code that shows below and save it in a note pad.

You need to add your parsed code in the codes below before using it in your blog's template.

==> To display ads at the center of your post

    <b:if cond='data:blog.pageType == "item"'>
    <div style="text-align:center;">
    Paste your parsed adsense code here
</div>
    </b:if> 

==> To display ads at the left side inside your post 
    <b:if cond='data:blog.pageType == "item"'>
    <div style="float:left;">
    Paste your parsed adsense code here
</div>
    </b:if> 

==> To display ads at the right side inside your post 

    <b:if cond='data:blog.pageType == "item"'>
    <div style="float:right;">
    Paste your parsed adsense code here
</div>
    </b:if> 

NOTE: The tag above only works on the post pages only and not on the homepage.

==> After adding your parsed codes inside the 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 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


Also Read:

Top High Paying Google AdSense Keywords For 2017


==> 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. 

The code might appear more than once in your HTML. So, click inside the find box and hit the ENTER key again. 

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.


2 comments:

  1. We are glad you were able to gain something from visiting this blog, thanks for stopping by.

    ReplyDelete