Take a look at the Google AdSense Ads on the left side, I’ve placed them inline, properly aligned with blog entries. To have ads inline with my blog entries (either on the left, or right), I use Wordpress plugin AdSense Deluxe with a little bit of extra HTMLs. We know it is against AdSense’s TOS to edit the original ads codes generated but its fine to add some HTMLS before and after the codes to adjust its position as long as you leave the original codes untouched. I’ve clarified this with AdSense.
AdSense Deluxe
If you are not using AdSense Deluxe to control your ads, you probably should. AdSense Deluxe gives you better ads management, and most important of all, it shortens your ads codes from this:
<script type="text/javascript"><!–
google_ad_client = "pub-XXXXXXXXXXXXXX";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300×250_as";
google_ad_type = "text_image";
//2007-03-22: content300×250left
google_ad_channel = "3517802273";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "2277dd";
google_color_text = "6b6b6b";
google_color_url = "6b6b6b";
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
to a very much simplified version like this:
<!–adsense#300×250–>
Click here to Download Wordpress Adsense Deluxe plugin.
Getting Ads Inline with Contents
To get ads to display inline, and properly aligned either to the left or right, we add some HTML & CSS before and after the original generated codes. Notice that my codes are in green.
<div style="display:block; float:left; margin: 0 15px 0 0;">
<script type="text/javascript"><!–
google_ad_client = "pub-8918970543424762";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300×250_as";
google_ad_type = "text_image";
//2007-03-22: content300×250left
google_ad_channel = "3517802273";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "2277dd";
google_color_text = "6b6b6b";
google_color_url = "6b6b6b";
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Explanation of codes
The div is wrapping the codes as a block and their position is controled by float. margin controls the white spacing around your ads.
float
float determines the position of your ads, either left or right.
Example of use: float:left; or float:right;
margin
margin gives your ad some breathing space. margin can be used in these following formats:
margin:[top down] [left right]
Example of use: margin:5px 3px;
margin:[all 4 sides]
Example of use: margin:5px;
margin:[top] [left] [botton] [right]
Example of use: margin:5px 3px 5px 3px;
Implementation
Reproduce your ad with AdSense Deluxe with a shorter name and insert it in your blog entry (code view).
Your ad will then display accordingly.
Related Contents |
Sponsors |
|
|
|
|
Posted by hongkiat in Web Tricks , at 06.05.07
|
|
Comments
David June 5th, 2007
Very comprehensive. By the way does blogger support what you have mentioned earlier or only applicable on wordpress?
ReplyCypherHackz June 5th, 2007
i also use the same thing on my site before. but now im testing using the large rectangular. and the ctr increase amazingly. :) he3.
Replyhongkiat June 5th, 2007
David: Actually I have this content scheduled to go up next week, but since you’ve mentioned. Thought might just give it a switch :-)
Cypher: Large rectangular is no doubt said one of the size that surely increased ctr. But lately I’ve noticed in my channels that sizes like 250×250 and 120×240 gives me better ctr and ecpm, even better than 336×280
Replye-kereta June 5th, 2007
nice tips…tq
Replymauro June 5th, 2007
Is there a way to limit this kind of ads in the home page? Google only allows 3 of them per page.
Replyhongkiat June 5th, 2007
Mauro: AdSense Deluxe keep that in count and will help you to take care of that.
ReplyJennyHow June 5th, 2007
Actually you can also do without the plugin.
just put and then your google ads in the middle of the tag.
Replyweirdoux June 6th, 2007
yeah… that’s right jenny. me myself had tried it before by copy the code from darren’s blog. what i mean is i get the code by clicking right—> and find the code at the “view page source”. i did it in 2005 for my blogspot blog and guess what….it works!
Replyhongkiat June 6th, 2007
Jenny: You are right, you can directly put adsense codes between the tags. AdSense Deluxe here helps you to place them in speed, further customizing different formats for different content.
I’ve tried using AdSense Deluxe to control other ads like Chitika, Adbrite, etc. It works well. I’ve even used AdSense Deluxe to help me generate Digg’s dugg button, the time when the plugin were not released yet. :-)
ReplyAlex June 6th, 2007
just ehe stuff i been lookin for. awesome mate!
Replypikey June 11th, 2007
how about those who are not using Wordpress but using Blogger instead? Is there a way to achieve the same result??
Replye-kereta June 22nd, 2007
I have done it. TQ Hong Kiat. :)
ReplyVincent Ruie December 4th, 2008
Nice tutorials Hongkiat. Is there any way to show ads for the first 5 post of the blog?. Is it possible?. By the way thanks!
Replyacoupiesliculge December 29th, 2008
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
Replybdgdmegmzmhzptrbiogtokbsnckdfvozyechello