Style your AdSense links

add to

“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">
 

What Now?

Digg this
Save to Del.ico.us
Stumble This
Subscribe
Leave a Comment

Further Reading

• 10 Steps to a Client Friendly Wordpress CMS
• Improve your typography on 3.7Crea.tv
• Branding your Wordpress Admin Panel
• A Quick Introduction
• Future of blog design

More?

Posted on 10. 01. 2008
Filed as Design, General
By Dejan Cancarevic