If you want to put some 125 x 125 ads in your sidebar widgets and don’t want to use a plugin here is a handy little tip that will help you out.
I searched for ages looking for a decent post on how to do this and the best I could find was this one over at www.thomasgriffinmedia.com.
But I found it a little confusing simply because I don’t use Thesis and probably never will.
But the concept was what I needed to place the ads in my learning the guitar blog primary widget.
The first thing you want to do is create a post, but don’t publish it, and upload your ads images into the post, unless of course you just ftp them into your images folder.
Once you have the source link for your images you want to add the link to the page the image is linking to.
Your link and image code should look something like this…
<a href="http://shop.ebay.com.au/rhythmicguitar/m.html?_nkw=&_armrs=1&_from=&_ipg=&_trksid=p3686"> <img src="http://rhythmicguitar.com/wp-content/uploads/2011/04/ebay_store_logo-125.jpg" />
So now that you have your images sorted, you want to add a new text widget in the sidebar. Go to Appearance/Widgets and drag a text widget into your preferred widget area.
Inside the text widget you will need to add the following code.
You could do this using a P class, Div or any number of different attributes, but in this scenario we are going to follow the example set by the previously mention post. Using an Un-ordered list.
We have named our class as “ads” in this example.
<ul class="ads">
<li>
<a href="http://www.songsterr.com/?referrer=91278"> <img src="http://www.songsterr.com/WebObjects/Songsterr.woa/Contents/WebServerResources/affiliate_banners/songsterr_banner_125x125.png?1287068433901" /></a>
</li>
<li>
<a href="http://shop.ebay.com.au/rhythmicguitar/m.html?_nkw=&_armrs=1&_from=&_ipg=&_trksid=p3686"> <img src="http://rhythmicguitar.com/wp-content/uploads/2011/04/ebay_store_logo-125.jpg" /></a>
</li>
</ul>
The next thing we want to do is add the style rules to the CSS, here is what I added to mine… I should also mention I just pasted the new styles at the very bottom of my style sheet.
ul.ads li.left {
float: left;
margin-bottom: 10px;
margin-right: 5px;
list-style: none;
}
ul.ads li.right {
float: right;
margin-left: 5px;
margin-bottom: 10px;
margin-right: 10px;
list-style: none;
}
ul.ads li a {
display: block;
}
Because we are using an Un-ordered list, I had to use list-style: none; to remove the bullet point next to the image.
