ASP.NET Programmer

Replicating Google Ad Formating:Fonts, Color, Layout

I was talking with a client and they were wanting to ramp up the dollars they were bringing in via Google AdSense. They directed me to a homeschooling website that was making good money off Adsense and Amazon ads. The site looked like HTML 101 / My first website and the client said if this plain jane website could monetize that well imagine what her site could do. The obvious thing that was escaping her was that this site had been around for 10+ years and was loaded with content. Can you imagine having the foresight to get on the web 10 years ago? The one thing I did notice was the vanilla website actually gave her a big advantage from the Google Adsense perspective. Strip out all the fancy CSS and styles, and the links to her articles looked very similar to the Adsense. The way she interspersed the blocks of ads, it was next to impossible to tell when you were clicking on an article and when you were hitting an ad. While I have no desire to turn back the clock to the web styling of the mid-90s, there is something to be said for this approach.

Today I thought I would look at replicating the format of the Google Adsense. How to go about finding the font size, color scheme, general layout. Once I have that, I can format certain sections of my site to generally match these blocks. So to get at the formatting, we need to do a right click over the Google Ad (not a left click, this isn’t a lesson in how to commit click fraud) and scroll down to This Frame >> View Page Source. This tells you that the Google Adsense block is basically being drawn into a frame. Once you get to the HTML, you get a glob of code that writes out the styles and the rendering of Google Adsense. Taking the basic leaderboard I’ve reassembled it to house two of my own links.

<div> <!-- a.title:link,a.title:visited,a.title:hover,a.title:active{font-size:11px;font-face:Verdana;color:blue;font-weight:bold} .description{font-size:10px;line-height:12px;font-face:Verdana} .url{font-size:10px;line-height:12px;font-face:Verdana} --> <table border="0" cellpadding="10"> <tbody> <tr> <td> <div class="title"> <a class="title" href="http://www.wickedsanfrancisco.com">Wicked San Francisco</a></div> <div class="description">Find Sold Out Theatre Tickets</div> <div class="description">To the Hottest Shows in San Francisco</div></td> <td> <div class="title"> <a class="title" href="http://www.taylorswifttour.com">Taylor Swift Tour</a></div> <div class="description">Find when Taylor will be in your town</div> <div class="description">Tour dates, tickets and information</div></td> </tr> <tr> <td colspan="2"> <div><img src="http://pagead2.googlesyndication.com/pagead/abglogo/abg-en-100c-000000.png" alt="" /></div></td> </tr> </tbody></table> </div> For added fun I included the Google Ads logo, I’d probably leave that out if I were you. Anyway here is the end result. Nothing flashy just a replication of the leaderboard format. This can be done with any of the various ad blocks offered.

Tags: css, Google Adsense, HTML, style