Written on February 17th, 2006 at 09:02 am by Darren Rowse
Designer AdSense Ads
While we’re speaking about Blog Design I’d like to point you over to one of my favorite blogs in terms of it’s design - Karen Cheng - Snippets of Life.
Karen regularly features in the finalists of all kinds of blog awards, usually in the design category. She’s also an Aussie.
The reason I wanted to point you over to her is not just because her design is pretty special but because she’s just decided to put AdSense ads on her blog.
Ok - not an earth shattering thing in and of itself - but the interesting thing is that Karen has decided to put her designer thinking into the design of her Adsense ads also.
There are two AdSense units in her sidebar and in each case she’s cleverly put a border around them that makes them look…. well… they look incredible! (screen caps above and below).
Now when i first saw the ads after an email from Karen asking what I thought I had two immediate reactions. Firstly started drooling - the ads integrate so well into her design and are incredibly tasteful (I want me some Karen!)
But secondly I found myself asking ‘are they within the AdSense rules?’ I passed these thoughts onto Karen and suggested that she email AdSense to find out.
Today she’s emailed me to say that AdSense have reviewed the ads and they are legal as long as she doesn’t alter the Ad code. As Karen has not done this she’s in the clear and the ads are approved.
It is worth noting that if you want to experiment with doing something similar that there are two main things from the AdSense Policy guidelines that you need to keep in mind:
1. You may not change the ad code itself. The wording in the policies is:
‘Any AdSense ad code, search box code, or referral code must be pasted directly into Web pages without modification. AdSense participants are not allowed to alter any portion of the ad code or change the layout, behavior, targeting, or delivery of ads for any reason.’
2. You can not be seen to be drawing undue attention to ads, either with text or images. The wording in their policy says:
‘Web pages may not include incentives of any kind for users to click on ads. This includes encouraging users to click on the ads or to visit the advertisers’ sites as well as drawing any undue attention to the ads.’
One strategy that some publishers have used that is similar (but much less subtle than Karen’s strategy) is to put images directly next to, above or below ads (directly in line with them) to make the images look like they are part of the ad. Google has ruled on many occasions that if you put images next to ads in this way that you need to have a clear border between the image and the ad.
Of course, the interpretation of this second rule is somewhat subjective and there must be a line somewhere between what people did with images (without borders) and what Karen is doing.
When in doubt I would highly recommend that you shoot AdSense an email. Politely ask if they would take a quick look at your ads to make sure you’re within their guidelines. I find that they usually respond quickly and with reasonable advice and requests. If you approach them with a question they always seem to give you the opportunity to make changes if you’ve broken the rules as long as you’re polite and make it clear that you’re approaching them because you want to operate in the rules.
57 Responses to “Designer AdSense Ads”
Jon
February 17th, 2006 9:25 am
Yep.. it will be interesting to see what results she gets from that, it certainly gets your attention a little more.
MikeGR
February 17th, 2006 9:31 am
I think it’s brilliant. Is it okay with Google’s TOS?
AdSense Design-Idee » BloggingTom
February 17th, 2006 9:34 am
[…] (via ProBlogger) von BloggingTom, abgelegt unter Internet, HTML & CSSKeine Kommentare » Ähnliche Artikel:AdSense im WeihnachtslookGoogle startet AdSense PartnerprogrammAdSense Einkommens-Vergleich […]
Darren Rowse
February 17th, 2006 9:40 am
Yep - they’ve confirmed it’s ok MikeGR (see above)
Swade
February 17th, 2006 10:50 am
OK, so how does she do it?
They look fantastic.
Nick
February 17th, 2006 11:13 am
I would assume she put then in a div, and set a background-image on that div. Then she would customize the google ad with the black on white/black on brown color scheme.
Darren Rowse
February 17th, 2006 11:27 am
looking at her source code - it’s in a div. I don’t understand it all but it’s definately a div.
Anthony
February 17th, 2006 12:07 pm
It would have been good if she implemented a regular adsense placement for a week and then this design based option to compare the data to measure the effectiveness. Either way it’s an awesome idea because of it’s simplicity and style, great work Karen!
James
February 17th, 2006 12:11 pm
I really like her ad layouts. They are a work of art. I must confess, I’ve done the lame thing with the “pictures next to the ads”. Google did ok it though. The other thing I’m proud of, though, is my bullets next text links. Unfortunately it looks a LOT better in FireFox than it does in IE…. But I really like it.
Gonna have to work on some of those Karen-Ads for myself. ;o)
Aaron Brazell
February 17th, 2006 1:49 pm
The good news, James, is they look great in IE7 too. :p
» Designer AdSense Ads The Blog Herald: more blog news more often
February 17th, 2006 3:13 pm
[…] 17th, 2006 and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently notallowed. […]
Marco
February 17th, 2006 3:40 pm
Yep, Karen really did something amazing. It looks incredible and I’ll try to do the same thing with the ads in my future website! :-D
Ken Wong
February 17th, 2006 4:01 pm
incredible!
I love her designs.
Quick Online Tips
February 17th, 2006 4:41 pm
This a beautiful way to blend ads so well.
Insult Outbox
February 17th, 2006 5:45 pm
They sure do look great! Thanks for sharing the information and concept. I shall see what I can come up with … Cheers.
Jake
February 17th, 2006 7:13 pm
Yes, I would be very interested to see how these ads would have done without the awesome design she did.
side by side comparison.
Adsense-Design » Webdesignblog
February 17th, 2006 8:09 pm
[…] [via: Problogger.net] […]
Marco Raaphorst
February 17th, 2006 8:33 pm
Sure, that’s fun. Try this also:
http://www.plan59.com/main.htm
Andy Merrett
February 17th, 2006 8:45 pm
TBH in this sort of case, I’d say it would draw more attention just putting the ads in without any decoration around them. This is a fantastic idea - it’s not adding big arrows saying ‘click on my ads’ - it’s blending them in to the style of the site ie the ‘torn paper’ effect (or whatever it’s called)
Da un toque de diseño a los anuncios de adsense - Online
February 17th, 2006 9:00 pm
[…] Darren Rowse, de Problogger ha escrito un post sobre el tema, donde podemos ver algunas capturas de estos anuncios con el toque especial del diseñador. […]
Darren Rowse
February 17th, 2006 9:12 pm
nice one Marco - subtle
Basic Thinking Blog » AdSense verschönert
February 17th, 2006 9:34 pm
[…] hm… ich weiss nicht recht, aber diese Art von AdSense-Tuning … ich bin mir irgendwie sicher, daß es viele zerreissen wird. Denn 100% gehen jetzt alle her und werden das im Stile von Karen Cheng umsetzen. Klar, sieht cool aus. […]
Robert Basic
February 17th, 2006 9:41 pm
imho its against the AdSense policy since its a very strong eyecatcher. It would be a different thing if every element of the sidebar has such a graphical backgorund. But Google seems not be very consistent with his policies, since the other way around they accept blended AdSense units which are very hard to spot among many bytes of text :-)
Serakesi » Diseo en adsense
February 17th, 2006 10:13 pm
[…] En problogger han escrito sobre ello y no quedan nada mal. Es una buena idea para mejorar el rendimiento de nuestro blog. […]
ProWeblogs » Diseños en Adsense - Generando Ingresos con tus Blogs
February 18th, 2006 12:14 am
[…] Via ProBlogger, llego al blog de Karen Cheng, Snippets of life, en donde se puede apreciar el trabajo que hizo Karen al integrar los anuncios en el diseño de manera muy original. Los anuncios quedan realmente muy bien, y lo mejor de todo es que Google le confirmó que mientras no modifique el código de los anuncios, es perfectamente legal hacer esto. Sin duda, abre una nueva perspectiva en cuanto a Adsense y la integración con los Contenidos. adsense diseño publicidad […]
Karen Cheng
February 18th, 2006 1:14 am
Thank you for all the great and interesting feedback and opinions.
Now I’m very excited to see what other designs others will come up with, that still comply with Adsense’s policies.
How I did it — I put the ad code in two DIV tags. One that holds the background image. The other that adds a bit of padding, so that the ad sits in the middle of the image.
Mike Rundle
February 18th, 2006 2:06 am
What’s odd is that when Technorati used to have AdSense on their site (now they have AdBrite I believe) a few weeks ago, they didn’t use the AdSense code at all. They wrote a custom Javascript function to catch the AdSense links coming down from within the iframe, then reprinted them out with XHTML so they could style them fully with CSS. They do the same thing now with AdBrite links I believe…… catching via JS and then reformatting. Is this against the TOS as well?
Andy Merrett
February 18th, 2006 2:20 am
I expect they’re big enough to have some kind of deal going with both partners - if not that’s VERY foolish.
Marco Raaphorst
February 18th, 2006 4:36 am
It’s not about the code you’re using to push into html. For example the color-plugin Darren showed a few days back is a php script for controlling the Google background color. I guess this is not an issue since the HTML which is pushed to the client is the same as Google generates.
Who minds html 1.0 or html 1.1 ?
;p
Anonymous
February 18th, 2006 6:51 am
艺术级的AdSense广告
300) {this.resized=true; this.width=300;}” onmouseover=”if(this.resized) this.style.cursor=’hand’;” onclick=”if(t
Darren Rowse
February 18th, 2006 9:14 am
I’d expect that they are premium publishers Mike.
Weblog Tools Collection » Designer AdSense Ads
February 18th, 2006 9:24 am
[…] Designer AdSense Ads Darren has noticed adsense ads with some unique styling. I am not convinced that this would increase revenue but it sure makes the ads look a lot nicer on the page. I REALLY like the way Plan59 did their ads at the bottom of the page. Technorati Tags: designer adsense […]
Alex M.
February 18th, 2006 11:59 am
This is it:
{
width: 200px;
height: 210px;
background: url(images/paper03.jpg) top no-repeat;
vertical-align: top;
}
That’s for the first. The other Google Adsense ad uses this DIV:
.card
{
width: 210px;
background: #fff url(images/card_xsmall01.jpg) top no-repeat;
height:310px;
}
I’ll try doing something similar to see if this does infact work. This is some pretty simple CSS DIV hacking…Nothing to fancy! :D
Karen Cheng
February 18th, 2006 1:01 pm
If you know how to navigate around CSS and HTML, then it’s pretty simple. The ad code sits in two DIV tags. One tag has the image (the piece of paper), which acts as a background. The other, has some padding so it makes the ad text sit in the middle of the image. The rest is colour choice.
>>>>In your stylesheet, you need to have :
.paper
{
width: 200px;
height:210px;
background: #fff url(paper03.jpg) top no-repeat;
}
.aditem_paper
{
padding: 28px 0px 0px 45px;
}
>>>>Then where you want to place the ads you need :
[ Insert ad code here ]
Enjoy!
Karen Cheng
February 18th, 2006 1:04 pm
Or rather…
>>>>Then where you want to place the ads you need :
[ Insert ad code here ]
(hope the above code shows up)
Karen Cheng
February 18th, 2006 1:08 pm
Ok didn’t work. Sorry about the dud posts.
Here’s a link to the code on my site info page,
http://www.karencheng.com.au/site.htm#ad_design
enjoy
Dana
February 19th, 2006 2:28 pm
Though the ads are cute and the attention may have made a few ppl click on them, I think in the long run the ads won’t perform any better than regular Google ads.
Darren Rowse
February 19th, 2006 5:37 pm
that might be true Dana - however if they get the same sort of CTR AND they are less obtrusive and fit with the design of the site nicely I think Karen comes out in front of many publishers who might have good designs but have ads that don’t quite fit with the design of their sites.
Frank
February 20th, 2006 10:27 am
I enjoy visiting Karen’s blog - not because of her web design skills, but because she is indeed, a great writer.
Is it just me, or do others question the web design skills of most blog designers?
Karen’s blog has extremely simple coding. And that’s the beauty of it.
If other blog designers give learning HTML, CSS, DHTML and Javascript a go, then they too, can create nice blogs like Karen’s.
It just surprises me to read how people do not know how Karen made these ads look the way they do..it’s really quite simple and I think Karen would agree to that.
Let me encourage all people to get into coding their own blogs as the possibilities will then be endless :)
Kliks
February 21st, 2006 9:19 pm
¿What about this http://www.worth1000.com/ and Google Adsense TOS?
Tongka
February 24th, 2006 5:05 am
There is this very nice site with nice ads… it looks so professional, and well designed.
In fact, it looks like google.
You can check it out here: http://blog.chewxy.com
I’m planning on using his designs for my blog. What do you think, Darren?
renee
February 24th, 2006 3:15 pm
well adsense just banned my account saying that i had a clicking program on my site-as if i’m such an idiot?! Now I’m not sure what I can use for my ads
renee,
—
http://www.blogrenee.com
Problogging » Blog Archive » Customize your advertisements
February 28th, 2006 8:15 am
[…] AdSense allows you to pick colors that match your site, you can get rid of the border (by setting it to white), etc. Darren actually talked about “designer” AdSense ads recently. It has been proven that blending AdSense into your content increases your click through rates significantly. If you’re trying to earn your income from AdSense, you need to learn to customize it as much as possible. As for affiliate programs - don’t limit yourself to the default banners that affiliate programs give you (unless they require you to use them in the TOS). Over at College Startup I designed my own buttons for the two affiliate programs I am using. I am getting much better click through rates than I got when I was using the default Six Figure Blogging banners. It only took about 20 minutes to whip up some new images and I have earned $400 since I implemented them - not a bad payoff for 20 minutes of work. […]
: ProBlogger Blog Tips
March 6th, 2006 10:51 pm
[…] […]
Dragonfly's blog
March 15th, 2006 9:45 pm
AdSense広告をデザインする
Designer AdSense Ads: ProBlogger Blog Ti
Top Internet Business - AdSense Secrets (Chris Pirillo) | Making Money Online
March 31st, 2006 4:42 pm
[…] Designer AdSense Ads: ProBlogger Blog Tips … because her design is pretty special but because she’s just decided to put AdSense ads on her blog … Darren actually talked about “designer” AdSense ads recently. It has been … […]
Making Money at Home - Designer AdSense Ads: ProBlogger Blog Tips | Making Money Online
April 3rd, 2006 11:18 pm
[…] Designer AdSense Ads: ProBlogger Blog Tips Designer AdSense Ads The Blog Herald: more blog news more often Says: Designer AdSense Ads Darren has noticed adsense ads with some unique styling. […]
The Home of Free Cash $$$
May 31st, 2006 8:56 am
[…] Designer AdSense Ads: ProBlogger Blog Tips … How Blogs Make Money Online. Adsense - Tips for Bloggers. How Much Money Do I Earn … Lessons I’ve Learnt. Adsense Tips and News. Advertising Tips … […]
John
October 9th, 2006 3:51 pm
I recently came across a guy selling these adsense designs. He calls it a background and he even has an email from google showing that it is within the TOS as long as the code is not amended. The way he does it is simply adding a piece of code linking to the design image with the adsense code just underneath. I thought it’s brilliant! Here’s the code:
Change the size to fit your adsense size.
ADSENSE CODE HERE - no amendments to it
John
October 9th, 2006 3:54 pm
Sorry, seems like the code is removed automatically. Anyway, it’s a table code with background=designer graphics and the Adsense Code is right in the middle of the table. Cheers!
How to design your adsense ads. « Roz Web
November 16th, 2006 5:09 am
[…] Designer Ads - Another integration technique that has been increasing in popularity is what I like to call ‘Designer AdSense Ads’. I pointed to one blogger who did this a few months back (with the approval of AdSense). Since then I’ve seen similar techniques used by others. […]
Okke Ornstein
December 29th, 2006 10:45 am
I’ve done another variation on the designer adsense ads, see my site, right column. This is fun to play with, still thinking about other options.
Satish Talim
May 30th, 2007 10:27 am
I had been experimenting with background images for Adsense (without changing Adsense code and using trick in css). I wrote to Google and here is what they say - “The rule of thumb is that any image which intentionally or unintentionally draws unnatural attention to your Google ads is probably a policy infringement. This includes placing ads on shapes like post-it notes, or placing background images behind the ads. Please note that your ads should appear exactly as they look in your account, without any modifications.”
By this count, Karen’s images are illegal. How come?
Satish Talim
May 30th, 2007 10:34 am
In my last post, the div part got cut off after posting it here. I mean to say that I can use div within div as Karen does…
Snacks
November 4th, 2007 11:02 pm
Oh this looks great I’m pretty new at blogging so I wonder if I could pull this off I’m getting a lot of great tips from this site I’ll try it out.
love making
January 8th, 2008 9:54 pm
i also want the tips but i am not sure how to put it on blogger…
any body knows then please tell me about that fancy adsense ads.
my blog is http://lovemakinglove.blogspot.com
chicago web design
June 17th, 2008 1:49 pm
I have designer ads on my blog without using any backgrounds:
http://siliconloop.blogspot.com
I just use different colors and I think it looks pretty cool.
Leave a Reply