If you view this post on it’s single page you will notice an AdSense block at the bottom of the post that is greatly enhanced with a bit of graphics work. No, this isn’t a recent Google addition to AdSense, nor do I have a deal with Google. You can decorate your AdSense ads yourself, with a bit of CSS magic!

We’re going to place our AdSense block within a div element and this element will be assigned a class to specify it’s background image, width, height, and various padding properties. The first step is to design your AdSense block within Google’s AdSense control panel, implement on your website, and get a screenshot of it. After this step my AdSense block resembles the picture to the left.

Take a screenshot of your AdSense block, paste this into Photoshop, crop out the rest of the picture (leaving your AdSense block only), and then create a new blank layer below your AdSense block layer. This new layer is where we will do all of our decorative work. Unfortunately we will not be able to edit any portion of the AdSense block, but we are free to edit anything surrounding the AdSense block.

I’ve decided to add a green border around my AdSense block - the picture to the right resembles what my work looks like as of now. Now all we need to do is hide the AdSense layer and save this image - this will be the background for our div element that houses our AdSense block.

If you place any graphical elements to the left or at the top of your AdSense block you will need to use appropriate padding to get the AdSense block out of the way (so the user can see the background image). Just measure between the outside edge of your background image to the border of the AdSense block and you have the exact amount you need to pad. Don’t forget to set the width and height to the size of your final image.

Here’s the final CSS code for our div element:

.ads {

background: #FFF url(/images/rect-ads.png) no-repeat top left;

width: 356px;

height: 290px;

padding-left: 10px;

}

By using this method you can easily combat ad blindness, where the user overlooks your advertising, while still blending the advertisements in with your site. Do you currently use this method, or one like it, to combat ad blindness on your site?

Note: Google has not specifically stated this is okay, yet there are many sites on the Internet using this method. Google’s Terms of Service specifically state AdSense may only be labelled in specific manners. If your account get suspended for doing this - it’s your own fault. (Source: Beta Flow)

Power by widya wiwaha