How to Add 125×125 Banner Ads to Your Right 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 WP-Smooth 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 Right Sidebar for the Banner Ads

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

<ul id="banner125" class="clearfix">
<li class="ad1"><a href="http://www.link1.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad2"><a href="http://www.link2.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad3"><a href="http://www.link3.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
<li class="ad4"><a href="http://www.link4.com"><img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" /></a></li>
</ul>

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

Note 2: In the img src code above, you may need to change the /wp-smooth-basic/ part to reflect the actual name of your theme folder.

For WP-Smooth Basic version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-basic/images/banner125.gif" alt="banner ad" />

For WP-Jazz Premium version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-prem/images/banner125.gif" alt="banner ad" />

For WP-Jazz Developer version, the img src would be:
<img src="http://www.mysite.com/wp-content/themes/wp-smooth-dev/images/banner125.gif" alt="banner ad" />

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

All you need to do is upload your 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:

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

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

Popularity: 69% [?]