Home » Internet » Apply Padding to Adsense Ads with this CSS Code

Apply Padding to Adsense Ads with this CSS Code

by Mrinal Saha
0 comment

Google AdSense is a popular Ad network for many small publishers like us. It works by coping pasting, small JavaScript code from AdSense dashboard to the part of the website, where you want to show ads. When people click on these Ads, you make money.

Now if you are an AdSense publisher for long time, then you may be already displaying Ads unit between the post. And plugins like Quick AdSense, make it easy to insert ads in the beginning, end, middle or anywhere you want within the blog post.

But sometimes, when we display Ads in the middle of the post, it may appear misleading to viewer. For instance, visitors may consider the ads as some image and click on it. Although we are not sure if this click counts as fraud click or not but this will defiantly degrade the user experience.

One way to get rid of this confusion is to, apply extra padding to make ads more clear. See the screenshot below.

adsense with padding

Apply padding to Adsense

To apply padding, simply add a little css, to the style tag of your AdSense JavaScript. The following will add extra padding on the right and top/bottom of the ads. Feel free to make any adjustment according to your need.

padding-right:300px;padding-top:10px;padding-bottom:10px;

To make it clear that, it’s an advertisement add text like ‘Advertisement’ or ‘Ads by Google’ using the following code

<div style="color:#666; text-align:left; font-size:12px;">Ads by Google</div>

The final code look something like the following screenshot.

google adsense modification

 

Since we are not tempering with JavaScript, this is not against AdSense policy. Moreover other reputed websites, also use this technique so you don’t have to worry. This small tip will reduce clutter and make your article more readable for visitor, while generating revenue for you. A win win situation for everyone.

 

You may also like

Leave a Comment