“Everybody’s doing it” is just the right sentence for Google AdSense. Everywhere you look, sites are crowded with AdSense and why shouldn’t they if it’s easy way to make money. In this article you’ll find out how you can style your AdSense and also you’ll find out how AdSense really works.
Style it
First if you plan to have adsense on your site, you should design and plan your space and content based on it. Here you will find all ad formats and sample placements for them. Most popular placements are header, side bar with links and in the content itself, floating or bottom of it.
Basically you have 3 different kinds of ads, AdSense for search, content and Referrals, you can read more about them on your AdSense setup page.
Let’s start with AdSense for content. Here you can choose between text and link unit. Text is mostly used for content placement and link for side bar. In both case Google uses Arial 10px font, and this is also one thing you should pay attention to when you are designing. On this setup page in few steps you can set color size etc and then when it’s done Google saves it like Ad unit. This is kind of new and very useful because you can always change you ad color for example, hide them etc. Link is below AdSense setup link – Manage Ads. So now in you AdSense code from your parameters only shown is width, height and date. In previous version your AdSense code had border, text, link color and all other parameters.
So besides this border, text and link color changes we can’t really do much. Even if you put your AdSense in some div and set font’s etc for it, it won’t have affect. But we can manage that div and fit AdSense into our site way we like it. Besides padding, margin, border and other standard CSS options, I’m usually using overflow: hidden;. Here is sample code
<div style="height:15px; width:660px; overflow:hidden; border:1px solid #ccc;"> <div style="margin:0 0 0 -46px;"> <script type="text/javascript"><!-- google_ad_client = "pub-9779369099248019"; //728x15, created 1/4/08 google_ad_slot = "0126080391"; google_ad_width = 728; google_ad_height = 15; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div>
So I put adsense code in div with overflow:hidden; and set width and height that fit’s my window, content or whatever. In this example there’s another div inside, with negative margin, for moving ads left, because it’s not important for overflow where’s content hidden. I’ve read google program policies and there’s nothing about hiding (partly) google image on the bottom (right etc..) Here’s definition of overflow
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
You can assign four values to overflow and they should give the following results: visible, hidden, about and scroll.
How it works
I won’t explain how it grabs content and generates links, I will explain what happens with code and you page after you implement ad. So when page is opened ad generates iframe and whole new html page in it, with tabular data containing your ads. So we are not really interested in data itself, we’re interested in style, and here is Google’s stylesheet for some ad.
#abg { font-family:arial,sans-serif; font-size:12px;color:#000000; white-space:nowrap;font-weight:bold; } .al { font-family:arial,sans-serif; font-size:11px; line-height:14px; white-space:nowrap; } .al .alt, .al a { color:#333333; font-weight:normal; text-decoration:underline; white-space:nowrap; }
Right now as far as I know there is no hack to change this, for example I would really like to remove that underline and change the font 
and I don’t think it’s really legal to change this, but we’ll always have that manage option.
Ad for search
We all know what this is, but I would like to say a few words about some options many people don’t know. I’ll describe example I’m using on portfolio and about page. Let’s style form a bit, click AdSense for search – Google web search radio button (now you won’t have site search but you need to have just one option to lose buttons below form) - "Google Search" on button (we can always change text) – continue. Now we have simple and nice form (it’s just for web search but it always can be changed to site search). On next page set your site colors and don’t include logo – click “Open results within my own site” and type url (create simple HTML page where results will be shown). And that would be about it, click continue and copy code and you are done.
From the form code you can delete that table it’s useless now. If you want to remove that button and use simple <a> for search like on this site use this code
<a href="javascript:document.searchform.submit();">Search</a>
Where “seachform” is name of the form – name=”searchform”. You can also ad status message and pointer to the so it looks nicer
<a onmouseover="window.status=' ';return true;"
href="javascript:document.searchform.submit();" style="cursor:pointer">
Have some feedback? Leave a comment
Cool thanks for that, I am going to install adsense on a new website, so that will be very helpful!
Pingback: LunaBlog » Personnaliser la présentation de vos encarts Google Adsenses
Pingback: Boost Adsense Revenue
Great post. I will must try this soon.
Thanks
I’m not so sure Google’s program policy allows for hidden overflow. Quote from the page you link to: Elements on a page must not obscure any portion of the ads. I would rather interpret that as the ads must be fully visible.
please help me how to put adsense ads between posts
http://gatesofegypt.blogspot.com
Many thanks for helping
@ Sheery
Feel free to post your question on KnowHow forum and i’m sure someone will bee able to help you there
It’s a great entry. Thank you!
I have a question, I am trying to find a way to remove underlining from adsense links. As I see from what you are saying – it’s impossible. Just wanted to confirm – is it really impossible? Google doesn’t let you do that? I cannot find anything about it on the web, where it says straight forward “no, you cannot do this, forget it”…thanks again!
p.s.: sorry if the question sounds incompetent, i am pretty new to this, and will appreciate if you could help me.
@ Ib
Well it can be done, if you open http://technorati.com/business/ you will see that code is different that is b/c they have i think over 20 million visits a month
and that would be the only way… You could try to mess with js but it’s a long shot
Pingback: مدونة cssbit » أرشيف المدونة » روابط (10)
i don’t think we should change ad sense code or do such juggling…May be account can be removed by them..and they are even not giving proper reason to remove
.
TechDudes
I’m trying to tweek my code at http://mesothelioma-help-doctors.blogspot.com
Does this work for blogger?
Forgive ME, but more about the subject, please!! You are going away from the topic too frequently, therefore it is uneasy to read your posts.
There are a lot of people here. I’ll join you guys. Believe it or not, many people fail in commenting stuff. I’m just trying to say a simple thing – before commenting something, think twice!
Pingback: Webpage Templates Design Your Own Kitchen Kitchen Island Design
i want help to build my website any design to make changes my text and other matters
Nice Stuff! Thanks man
You shoundn’t play such tricks. If you try to be overclever, you will lost adsense account along with all money in it.
Pingback: Personnaliser la présentation de vos encarts Google Adsenses | Le Blog de LunaWeb
Pingback: Styling AdSense with CSS | danielemarino.net
Very nice work!
I searched a long time for this
Awesome. I love CSS…. greatest thing since the optical mouse! lol
cheers
I was just searching that first code only…Thanks a lot.
One question is also there…? Could you tell me why you have used a white background for your adsense block than the natural blue one..?
Great work, helped me a lot for some of my pages….Thank you.
Very useful tutorial. It works great. Thanks
god site
Pingback: Tranformar Adsense via CSS para incrementar ingresos
Very good, tanks
You shoundn’t play such tricks. If you try to be overclever, you will lost adsense account along with all money in it.
Very nice work!
I searched a long time for this
Thank you for your sites to me a good source of some..
i like the post but i need to find that can i add custom fonts to my ad unit?
bayanlarla sohbet et
I cant use adsense
I only changed the height and width of my ads and it’s good enough for me.
Hi, you have a good post. Do you know some web site plug in or script that will auto style adsense so it can adopt automatically thru the content’s style???
Having a hard time with adsense.
Pingback: Google Adsense Best Performing Ad Banner Size | TheXBit Blog