Integrating AdSense Design to Your Theme

16. Jun, 2010 View Comments

When it comes time to monetize your blog and you decide on running with Google AdSense as your ad solution, one of the first things your blog’s visitors will notice, if not taken care of up front, is how these ads show up like a sore thumb.

Once you start creating new ads, unless they are image only based, you will soon notice that the default look of your new ads are very…”plain” looking. They have a white box with some blue hyperlinks and other colors that are not really retina friendly when it comes to attempting to maintain a standard look and feel to you blog via its theme.

Screenshot of default Google AdSense link/text ad:

Not the sexist looking block that you may want to slap your readers with, eh?

Designing AdSense Blocks to Match Your Theme
The first thing I wanted to do when I started adding AdSense block to the blog was to make sure that they weren’t intrusive, but that they were inconspicuous enough to appear that they are part of the overall feel of the blog. You’ll notice at the end of this and every post on RichWallace dot Net that my ad blocks blend in with the theme and I use the same color scheme for the ad blocks that the site uses.

Tools Used
I used a number of different, but simply tools to accomplish my goal in integrating the AdSense blocks with the site. You may use others, but the general concept is the same. Advanced folks may be able to read their theme’s CSS file to get the proper color values as well.

Snagit – Allows you to take a quick snapshot of whatever is on your screen, in this case, I took a shot of RichWallace.NET:
Adobe Photoshop – After opening the new image in Photoshop, I can easily extract the color codes I need to adjust the AdSense values.

Now that I have the necessary tools I need to get the correct theme colors, I can adjust those colors when building my ad blocks in AdSense. Here is a new screenshot of my ad settings for all lead-out ad blocks on RichWallace dot NET:

Now, when I save the ad block and Google starts to serve up the ads on my blog, the ad blocks blend in with the theme and ensures that I have full control over how they appear on the site. There’s nothing worse than attempting to read someone’s content only to have my eyes pulled away thanks to an ill-designed ad block. Again, there’s nothing wrong with monetizing your blog, but don’t let the ads become intrusive or you’ll start losing readers and not getting any clicks whatsoever.