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;
&lt;script src='http://pagead2...../pagead/show_ads.js'

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.


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

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

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.

If you enjoyed this article, get email updates (it's free).

blog comments powered by Disqus

NEXT POST: Newer Post PREVIOUS POST: Older Post Home

About Rajeev Edmonds

MintBlogger author - Rajeev EdmondsRajeev Edmonds has been blogging since 2006 about digital marketing, social media and of course about problogging. He specializes in WordPress installation and Thesis theme customization. He is the founder and editor of MintBlogger where he blogs about new media strategies.

Since April, 2012, he's making his living entirely from his blogging efforts. He holds a post graduate degree in computer applications and loves to dig in CSS/HTML code. Read more →

Get Custom Design For Your Blog

Website showcase Nothing converts better then a unique blog design with a branded look n' feel.

Get a unique design for your blog that brings more leads and prospects for your business. Give a new skin to your existing theme to stand out in the crowd. Change theme and see the difference!

Request a Free Quote NOW!

Start Your WordPress Blog

WordPress logo Are you planning to start your own self-hosted WordPress blog? You can get one today!

This is right time to get started. Claim complete control over your WordPress blog hosted on a reliable and powerful web server. Be the owner of your WordPress blog without any restrictions.

Claim Your Free Blog Setup NOW!