Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

Can I change my AdSense to match Digg.com?

Dear Dave, can i change the format of my Adsense layout? I went to Digg.com and I kinda like the layout of their adsense that they had (at the top). If so, how would I do that on my Moviebuff site?


Dave's Answer:

For the most part, you can always find a Google AdSense layout that you like and figure out how they've laid it out by viewing the source to the page that includes the advertisement.

You mention Digg.com and, yes, they do have an attractive banner advert on the top, as shown in this figure:

Digg.com AdSense: scaled 60%

Popping open the source itself (which can be done with View --> Page Source... or similar, depending on your browser) and scrolling down a bit, we should be able to find the exact sequence of AdSense code that they're using at Digg.

Unfortunately, Digg is part of the Federated Media Network which means that they're not using the usual Google AdSense code to serve up their advertisement, but rather some sneaky FM code. :-)

Fortunately, I recognize what they're doing anyway, which is having just one text advert. You can do that too if someone buys the exclusive rights to your own AdSense space through the AdWords program.

The easiest way to achieve this effect, however, is to work with a graphical banner ad, so let's pop over to the AdSense site and check out how to work with graphical banner ads instead. The basic approach of using CSS to create the border around the ad block is the same in either case.

Log in to your AdSense account, then go to AdSense Setup --> Products --> AdSense for Content. You'll then want to choose "Ad Formats" which you can reach here: AdSense Ad Formats (you probably need to be logged in to see that page, actually). On the page are lots of different formats, including the one we want to see:

Google AdSense sample banner graphic

You can't select this, however, if you don't also specify that you want image-only or text and image ads as your Ad Unit:

Google AdSense Ad Unit: Image Ads

This gets you part of the way there, but the additional fancy outline that Digg has is something special they've tweaked. You can probably attain the same by using a border within a DIV sector that wraps the Google block too, but it still won't be quite as attractive as the Digg ad block, which they've done in cooperation with Google.

Here's a sample of the CSS you could use, I'll just wrap the graphic shown earlier so you can see how it's done:

Google AdSense sample banner graphic

Not quite as attractive, but still, not too bad to look at. The code that I used was:

<div style="border:1px solid #999;padding:10px;width:488px;">
<center>
  Google code would go here
</center>
</div>

Hope that helps you out! Oh, and if you haven't signed up for AdSense yet and started monetizing your visitors, why not sign up for Google AdSense right now?



Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon    

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

You've got to be kidding me. My partner and I spend over an hour trying to figure out this exact thing for our site. We broke the javascript apart and saw all these crazy ways that they handled this. I was sure that if we were to try to implement anything like this we would be kicked off the adsense program. How much hacking of their code are you allowed to do anyway? I though it was none.

Posted by: Peter at November 28, 2006 4:37 PM

I'm not digging into the JavaScript that comprises the basic AdSense unit, Peter, I'm just showing how you can wrap an AdSense block with some rudimentary CSS to make it more attractive. :-)

Posted by: Dave Taylor at November 28, 2006 4:50 PM

And how about the custom designed AdSense ads?

Posted by: Komme at April 22, 2008 2:39 AM

Komme, Digg is a premium publisher, who got extra rights to make well fashioned ads, rather than the regular ads that we have in our websites.

Posted by: Chetan at May 15, 2008 3:18 AM

I have a lot to say, but ...
Starbucks coffee cup I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!











Remember personal info?


Please note that I will never send you any unsolicited commercial email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Uniblue: Free Virus Scan

Follow me on Twitter @DaveTaylor

Search
Find just the answers you seek from among our 2300+ free tech support articles by using our Lijit search engine.


Help!





Subscribe to
Ask Dave Taylor!

Add to Google Reader
Add to My Yahoo!
Subscribe in NewsGator Online

RDF   XML

Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.


Recent Entries
Book Links
© 2002 - 2009 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.