Add AdSense Code in Blogger Post Body

Right now I want to share about add Adsense code in post body. As we know, blogger was integrated with Adsense to monetize your blog. You can add Adsense below on the post using Blogger feature. How to use it, just go to template of your blog and tab Layout and then Page Elements. You can see in you layout the headeng "Blog Posts". Click the "Edit" link at the bottom right corner. You will see this screen.

My assume that you have a Google AdSense account. If you don't, you can create one using the same login through your Google account. You will be assigned a Publisher identity number which shall appear in all your AdSense codes.

Tick the “Show Ads Between Posts.” You can select whether to show ads after every post or after several posts. In accordance with AdSense TOC, a maximum of 3 Ads will be displayed. Choose the ad format and color scheme. Save the changes and refresh your Blog to see the Ads.

Now, how to add Adsense code in post body. First you must log in to Google Adsense Account. Go to Adsense Setup -> Product and choose "AdSense for Content". And then select "Ad unit" and follow their instructions on picking the size of ad, color combination, and so on, right till the end when they automatically generate a HTML code for you. Copy this code and paste it into Microsoft Notepad.

You must converting some of the characters to character entities before you paste to template. Why, because this code will be convert by blogger and code what you got from Adsense account cannot show.

What code must be converting if want to paste to my template? You can changes several character like
< with &lt;
> with &gt;
" with &quot;
And your final code should look something like this:

<script type="text/javascript"><!-- google_ad_client = "pub-0000000000000000"; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336x280_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "000000"; google_color_text = "000000"; google_color_url = "000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

If you want to converting automatically, you can try to this site or this site.

After converting Adsense code, now I can show you to paste to blogger template. First you must login to your Dashboard. Go to Template -> Edit HTML and don't forget to click the box next to "Expand Widget Templates".

Block copy the entire HTML code for your site that you presently have and save it in a separate text file in MS Notepad. You can also click the "Download Template" link to backup the template. This is one of the two necessary steps whenever you want to change the template. The second step is to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.

Now search for post.body through your browser's search function (Ctrl+F for Firefox and IE). You should see these lines:-

<div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

If you want the AdSense ads to appear between the post title and post body, add the following code above the orange lines. If you want the AdSense ads to appear immediately after every individual post, add the following code below the orange lines. The code to add is:-

<div style='float:left;'> AdSense Code </div>

The AdSense Code is the one you have amended above in MS Notepad. Do NOT save the template, but click the Preview button to see if you like the placement of the AdSense ads.

If you want to change Adsense ads on the right site of the text, just change code like this:

<div class='post-header-line-1'/> <div style='float:right;'> AdSense Code </div> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Hopefully this posting helpful for all, more detailed about this you can go to this link below. Happy blogging.
Tips for New Bloggers: AdSense Code in Blogger Post Body

Print PDF