In this Adsense tutorial, we're going to look at one of the ways we have at our disposal to blend our Adsense well. By far the most important attributes you can modify are the position and colour of the adverts, and positioning your Adsense will be the primary focus of this tutorial. Also, with so many website publishers using WordPress, this tutorial will be geared towards users of that platform. Got your Adsense goggles on? Then we'll begin.

Adsense In WordPress

WordPress bloggers are fortunate in that no special plugins and no intricate procedures are needed to insert Adsense code into their content. Joomla! publishers, in sharp contrast, have a hell of a time inserting Adsense code into their articles (read how to insert Adsense into Joomla!). To add Adsense to a WordPress post or page, do the following:

• Use the HTML view of the editor - important!
• Navigate to the position in the post/page you want the Adsense to appear.
• Paste it in

If you then view the post in the visual editor you will not see the Adsense. You won't even see the Adsense code, but rest assured, it is there on the page.

Positioning Adsense

Adsense that is embedded into the content, with text flowing around it tends to get better click through rates than Adsense inserted at the start of the content/between paragraphs/at the end of the content. We're not here to explore why that is the case, only to give you the tools to get the job done.

We have two choices: we can position the Adsense either to the left or the right of the page. In either case, the content will flow around it in the remaining space. A dash of CSS is what is needed to accomplish this position sorcery.

The first question is how do we get our hands on the CSS for our WordPress template? On your WordPress dashboard click the Editor link in the Appearance category and then click on the name of the CSS file.

The CSS file is usually found at the bottom of the list of files on the right. Stylesheet.css is a common name for it.

I find that the best thing to do is place all the new CSS code at the bottom of the file. That way if you botch something and need to remove it, it's easy to find.

The following is the CSS code you need to position a 250 x 250 pixel block of Adsense to the right of your page:


div.rightAds250 {
float: right;
width: 250px;
height: 250px;
margin: 0 0 10px 10px;
}


To get this to work, you'll need to place the Adsense code in a div that has a class="rightAds250". We use a class and not an id so that we may place more than one instance of the code on our page. Sneaky like cat.

Your Adsense code will now look something like:

<div class="rightAds250">
<script type="text/javascript"><!--
google_ad_client =....

float: right; - this moves the Adsense to the right of the page and forces the content to occupy the remaining space on the left. If there is enought text, it will flow around the Adsense, over and underneath it, depending on where in the content you placed it. Similarly, you can use float: left; to position the Adsense to the left. Varying the positioning breaks the hypnotic spell of blanking out adverts that are always seen in the same place - and that means higher clickthroughs. Doh! I promised there would be no "why" explanations, only "how"!

width: 250px; height: 250px; - whenever you float elements, you must specify the element's size lest the sky fall in.

margin: 0 0 10px 10px; - this piece of CSS puts a gap of 10 pixels between the bottom and left edge of the Adsense and the surrounding content. You don't want your content jammed right up against the Adsense and this CSS pushes it away. You can vary the distance by changing the number of pixels. Note that we change the left margin here because we floated the Adsense to the right. If you want to get flashy and float to the left, you'd increase the value for the right margin.

Immediately after the floated Adsense div, you may need "clear" with CSS. For example, if you have a small amount of content to the left of your Adsense before a heading starts, the room the Adsense takes up may cause your heading to wrap onto two lines. That don't look too good, pilgrim. In this case, it may look better if your heading was positioned after the Adsense code. To make this happen, you'll need to put a "dummy" div just before the heading - again in the HTML view of the editor - that has a class="clear". Then put the following code in your CSS:

div.clear {
clear: both;
}


The dummy div looks like this:


<div class="clear"></div>


This will work for Adsense floated both left and right.

Floats are dangerous things. Used badly, they can cause untold damage to your WordPress design and in the wrong hands, they can destroy whole economies. Be careful!

CSS is really useful, but some publishers don't feel they have the time to learn it. If there is only one piece of CSS you learn, make sure it is the one above. Having the ability to position your Adsense in different places will increase your CTR.