Optimizing the Adsense positioning on your Blogger Blog directly from Template XML

Let learn about ad placements Adsense is no doubt one of the most  trustworthy and powerful money making tool for Bloggers or Web Masters. Every Web master knows that getting approved by Adsense is not the ultimate key for earning a good amount of money! To make the most out of your site you need to place the Ad-Codes properly at the perfect spots on your Web Site!

Now for placing ad codes we have a complete freedom on WordPress blogs or in our own web-sites. But if we are using the default Gadget on Blogger, then we are pretty  limited by the Layout of the blog! Now you may ask how to put the adsense code in the way we want to,  on blogger? Since now you should have noticed that Although I have been using blogger I have put my ad-sense code on the places I want just like any other General Websites or WordPress blog!

So, lets learn how to do that in Blogger XML template. After this tutorial we shall know:

  • How to put the Adsense code directly on the blogger template for maximum exposure;
  • Making the ad-codes appear conditionally on specific pages of your blog;
  • Put ad codes in between Post Body and Post Title and also below Post Body for maximum exposure;

So lets see how we can do that…

Preliminaries and Strategies:

Ok, Lets strategize the positioning first! We shall be keeping the following points on our mind:

  • Ad sense allows us to put only 3 Ad-Contents and 3 link units. We shall take full advantage of it and make sure that we do not violate any rule!
  • So we shall put a rectangular ad (336×280) above every post just below the Post Title. Also we shall add a 468×60 rectangle box below post with two link list- one 468×15 and another 120×90.
  • Obviously we shall be properly aligning them using a Table layout.

Obviously you can make your own strategies. Think on it, do some research and when you have finalized go to your Adsense Account and do the followings…

Setup your Ad codes

  • Go to Adsense Setups and make a new AdSense for Content
  • Select Ad unit Type as “Text and image ads(default)” and Continue
  • Now select the Ad Format as we have decided before and do the necessary modifications for blending your adsense ads into your template (HINT: If you are using a light template or theme then select 000080 as the Title Color Code).
  • Click on continue and Adsense will prompt you about making a channel! I recommend that you should make a new channel in order to track your adsense performance! Once done click on save and you will get your code.

Do the same process for making other Ad content units and link units. Paste all the generated codes on Notepad++(recommended) or Simple Notepad and keep it handy for future use.

Placing the Ad-codes properly on your Blogger Template:

Now we shall place the Ad-codes in such a manner that

  • The ad-codes shown above and below the post should appear only on inner post pages. This is a must in order to follow the Ad sense TOS.
  • We shall align the ad content units and ad link units properly using a Table

Now the proper alignment depends on what strategy you are going to use! But for now I am sharing the codes needed for the strategy I have mentioned above:

Converting the Ad-codes into escaped characters:

Convert the ad code

This is a must to put your code into blogger template…

  • If you are using Notepad++ then just Select the whole code and go to TextFX > TextFX Convert > Encode HTML (Just as shown on the image below) and you are done! Convert using Notepad
  • Or you may use our Online HTML Encoder/Decoder Tool. Just Enter the code with the following preference and click on generate! Convert using our online toolkit Now just save the generated code… (Note: Do remove the Gigya default Tracking img snippet from the code you have generated)
  • Or manually also you can  replace all “<” sign with “&lt;” “>” sign with “&gt;” and “”” sign with “&quot;” (Of course with out the quote);

Do the same for all the codes you are going to put in your blogger template and save it somewhere to keep it handy for future use.

Inserting the code on your Blogger Template:

Now comes the most interesting part! Pretty much easy though!

  • Go to Blogger Dashboard > Layout > Edit HTML and Click on “Expand Widget Template”.
  • Now find the following piece of code on your Template:
    <
    pre style=”border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: ‘Courier New’, courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px”><data:post.body/>
  • Replaceit with this:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div>

    <!-- Replace this line with the 336X280 rectangular box ad-code -->

    </div>

    </b:if>

          <data:post.body/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='text-align: center;'>

    <table border='0' width='100%'>

    <tr>

    <th align='center' scope='col' valign='middle' width='70%'>

    <!-- Replace this line with the 468X60 rectangle ad-code -->

    <br/>

    <!-- Replace this line with the 468X15 link list ad-code -->

    </th>

    <th align='center' scope='col' valign='middle' width='30%'>

    <!-- Replace this line with the 120X90 link list ad-code -->

    </th>

    </tr>

    </table>

    </div>

    </b:if>

  • Make sure that you have replaced the lines <!—Replace this with *X* … ad-code -–> with the codes you have generated before!

Save, Preview and you are done! Now that was easy isn’t it?

Understanding the code to do a little bit of your own modification:
  • The line <b:if cond=’data:blog.pageType == &quot;item&quot;’> instructs the blogger XML Parser to parse the code in between this tag and the closing </b:if> tag only if ,the page type is a separate post page! Means your ads will appear only on the inner pages of your blog! This makes it sure that we are not violating any adsense TOS
  • The table layout below the <data:post.body/> makes the ads appear like this The table layout of the ads
  • If you want to align the rectangular code above the post body then just before the <data:post.body/>paste the code like this:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div style='float: left; margin: 0 10px 10px 0;'>

    <!-- Replace this line with the 336X280 rectangular box ad-code -->

    </div>

    </b:if>

  • Obviously you can change the float: left to float: right to make the ad appear aligned right with your post body! Play with the margin as well until you get your satisfaction.

Once done click save and see your ads appearing on hot spots on your blogger blog!

Adding other Ads on your blog:

Now this totally depends on your strategy! After making the above modification we have 1 link ad unit and 1 ad-content unit left! I have made the following use of them:

Well that was my strategy! Play with the placement a little bit and make your own strategy which suites you the best! If you already have a better ad placement strategy than this, then do share it with us!

11 comments

  1. TechZoomIn

    Good that we have so many plugins to maintain AdSense on WordPress..This will be Great help for the blogger users..

  2. Swashata

    Yaa dats true! WP really gives us freedom to place any ad on any page! But in blogger we are pretty much limited to the above strategy!

  3. Susan

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    Susan

    http://ovarianpain.net

  4. Susan

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    Susan

    http://ovarianpain.net

  5. Pina

    thanks for the precious tips 🙂
    do you think it could be possible to only show adsense in SOME specific posts,
    such as post with a specific label?

  6. Mike Clarke

    Swashata, some great tips here. I’ve long abandoned Blogger for WordPress based sites, but I do have some clients who still insist upon “free”. Your tips will make it easier to monetize those sites effectively.

  7. social

    Have you given any kind of thought at all with converting your current web page into Spanish? I know a small number of translaters here which would certainly help you do it for no cost if you wanna make contact with me.

    • Swashata Post author

      We have loads of things to do with our blog. Currently a redesign is in queue. We will see what we have to do about it in the next version!

Comments are closed.