Wednesday, April 27, 2011

AdSense Code in Blogger Post Body!!!

Change the AdSense code

This heading may sound misleading. We are not at all altering the code but converting some of the characters to character entities. We have to parse the AdSense code so that it can be included into your Blog template.
This is not against AdSense rules because after the code is inserted into the template, when you view the source code of the template, you should see the exact same AdSense code that Google has generated for you. Indeed, if it is anything different, it means that you have not parsed it correctly and should review the code again. Parsing the code essentially involves replacing the following HTML characters:-


<
with &lt;
> with &gt;
" with &quot;

Your final Google
AdSense Code should look something like this:-


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


Insert code into template


Login to your Dashboard. Go to Template -> Edit HTML and click the box next to “Expand Widget Templates”.


AdSense Code in Blogger Post Body


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.

Do you want to have the AdSense code on the left of your text as shown in this screenshot?


AdSense Code in Blogger Post Body


Choose the smallest AdSense format like 125x125. Insert the AdSense code here:-

<div class='post-header-line-1'/>
<div style='float:left;'>

AdSense Code

</div>

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


If you want the Ads on the right of the text, like this:-


AdSense Code in Blogger Post Body


Insert the code as follows:-

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


Set the AdSense ad margins


If your AdSense ads are too close to the edge, you may set a margin in the style tag. To give you an idea how wide the margin should be, you can see the sample in our other
Business Fables blog where the left margin is set to 30px. The code used was:-
<div style='float:left; margin-left:30px'>
AdSense Code

</div>


Should you want to align the AdSense ad to your text, you can specify a margin or padding around the entire AdSense code. The code you can use is:-

<div style='float:left; margin:5px 10px 15px 20px'>
AdSense Code

</div>


The first number 5px is for the top margin, 10px is for the right margin, 15px for the bottom margin, and 20px for the left margin. You should of course change these values to suit your template.


Preview the template and if you are satisfied, save the template and refresh your Blog to see the new positions of your AdSense ads.


Other than Google Ads, you can learn how to place
AdSense Product Referrals in your Blog.

0 comments:

Post a Comment