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

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…

• 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:

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!
• Or you may use our Online HTML Encoder/Decoder Tool. Just Enter the code with the following preference and click on generate! 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
• 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:

• One Link List ad below the navigation menu of course maintaining the Google Adsense Accidental Click Policy
• One Vertical ad-content on the columned sidebar!

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!