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.
Yep.. it will be interesting to see what results she gets from that, it certainly gets your attention a little more.
I think it’s brilliant. Is it okay with Google’s TOS?
[…] (via ProBlogger) von BloggingTom, abgelegt unter Internet, HTML & CSSKeine Kommentare » Ähnliche Artikel:AdSense im WeihnachtslookGoogle startet AdSense PartnerprogrammAdSense Einkommens-Vergleich […]
Yep – they’ve confirmed it’s ok MikeGR (see above)
OK, so how does she do it?
They look fantastic.
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.
looking at her source code – it’s in a div. I don’t understand it all but it’s definately a div.
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!
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)
The good news, James, is they look great in IE7 too. :p
[…] 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. […]
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
incredible!
I love her designs.
This a beautiful way to blend ads so well.
They sure do look great! Thanks for sharing the information and concept. I shall see what I can come up with … Cheers.
Yes, I would be very interested to see how these ads would have done without the awesome design she did.
side by side comparison.
[…] [via: Problogger.net] […]
Sure, that’s fun. Try this also:
http://www.plan59.com/main.htm
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)
[…] 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. […]
nice one Marco – subtle
[…] 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. […]
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 :-)
[…] En problogger han escrito sobre ello y no quedan nada mal. Es una buena idea para mejorar el rendimiento de nuestro blog. […]
[…] 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 […]
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.
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?
I expect they’re big enough to have some kind of deal going with both partners – if not that’s VERY foolish.
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
艺术级的AdSense广告
300) {this.resized=true; this.width=300;}” onmouseover=”if(this.resized) this.style.cursor=’hand’;” onclick=”if(t
I’d expect that they are premium publishers Mike.
[…] 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 […]
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
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!
Or rather…
>>>>Then where you want to place the ads you need :
[ Insert ad code here ]
(hope the above code shows up)
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
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.
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.
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 :)
¿What about this http://www.worth1000.com/ and Google Adsense TOS?
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?
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
[…] 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. […]
[…] […]
AdSense広告をデザインする
Designer AdSense Ads: ProBlogger Blog Ti
[…] 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 … […]
[…] 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. […]
[…] 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 … […]
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
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!