banner ad
banner ad
banner ad
By June 1, 2010 0 Comments Read More →

How to Add 125×125 Banner Ads to Your Sidebar

Many people like to display 125×125 banner ads in their sidebar. In this tutorial, I’ll show you how to add them to your own site.

Step 1 – Upload a Generic 125×125 Banner

The image to the right is already located in the /images folder found in your theme folder, so you can use that if you like. The file name is banner125.gif.

Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif and upload it to the /images/ folder within your theme folder (or change the file name used below to reflect the name of your own file).

Step 2 – Create a New Text Widget in Your Sidebar or Footer for the Banner Ads

Add a new text widget to your sidebar or footer, give it a title if you like. Then copy and paste the following code into the widget box:

<div class="banner125 clearfix">

<div class="ad left">
<a href='http://www.link1.com'><img src='http://www.mysite.com/wp-content/themes/wp-bold/images/banner125.gif' alt='banner ad' /></a>
</div>

<div class="ad right">
<a href='http://www.link2.com'><img src='http://www.mysite.com/wp-content/themes/wp-bold/images/banner125.gif' alt='banner ad' /></a>
</div>

<div class="ad left">
<a href='http://www.link3.com'><img src='http://www.mysite.com/wp-content/themes/wp-bold/images/banner125.gif' alt='banner ad' /></a>
</div>

<div class="ad right">
<a href='http://www.link4.com'><img src='http://www.mysite.com/wp-content/themes/wp-bold/images/banner125.gif' alt='banner ad' /></a>
</div>

</div>

Note 1: In the above code, you’ll need to change mysite.com to your own site domain name.

Step 3 – Replace the Generic Banners and Links With Real Ads

All you need to do is upload your own 125×125 banner image(s) to the /images folder, and change the code above to reflect that.

For example, if you upload a new banner called ad125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:

<div class="ad"><a href="/wp-bold/http://www.solostream.com"><img src="http://www.mysite.com/wp-content/themes/wp-bold/images/ad125.gif" alt="banner ad" /></a></div>

And that’s it. The Stylesheet is already set up to display the ads correctly.

Posted in: Tutorials

About the Author: