How To Embed Adsense Ads In Blogger Posts

Often, we want to embed our Adsense code at the desired place in and around our blogger post. Novice bloggers with little or no knowledge of CSS may find it difficult to place the Adsense ads at the desired place. Blogger has limited options and place your ads at predetermined positions. For example, if you want to place an ad just below the heading of your post, it does not give you that liberty to do it. If you will try to put the code in your post from within the post editor, it will not work at all and will appear as plain text in your post. There are few simple techniques that enable you to place these ads at the location you want it to appear.

Save your template

Before implementing any changes in your template, it is very important to save it. In case some mishap occurs you can easily restore your original template. To save your blogger template first go to Layout tab and select Edit HTML sub-tab. Click the Download Full Template link and save the template on your PC.

Step by step procedure

Generate the Adsense code from your account and open the Ad Parser. Paste the ad code in the box and press Parse button. Copy the parsed code and save it in any text editor. The parsing process is very simple and is based on 3 simple replacement rules.


1) < is replaced by &lt;
2) > is replaced by &gt;
3) " is replaced by &quot;

After parsing your ad code will look some thing like this.

&lt;script type='text/javascript'&gt;&lt;!--
google_ad_client = &quot;pub-xxxxxxxxxxxxxxx&quot;;
/* 468x60, created 2/4/08 */
google_ad_slot = &quot;xxxxxxxxx&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script src='http://pagead2...../pagead/show_ads.js'
type='text/javascript'&gt;
&lt;/script&gt;

For placing ad above or below your post header, find the following line in your template.

<div class='post-header-line-1'/>

Paste the code above this line, if you want to show your ad above post header. For showing the ad below post header, simply place code just below this line.

For placing the ad at the end of your post body, find the following line in your template.

<p><data:post.body/></p>

Paste the code below this line, to show your ad right at the end of your post.
To align the ad on left, right or middle, you can surround your ad code with following tag.

<p align="center">
Your Ad code
</p>

Note: /* Replace "center" with "left" or "right" for desired alignment */

To make ads visible only on post page you can surround your ad code with following tag.

<b:if cond='data:blog.pageType == "item"'>
Your Ad code
</b:if>

By using this technique you can easily place your Adsense ad at your desired place. I hope this information will be useful for you. If you face any problem, feel free to contact me.