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-enlightened/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-enlightened/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-enlightened/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-enlightened/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="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.

About the Author

This is the Biographical Info field in the WordPress user profile. You should write something here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Post a Reply

Your email address will not be published. Required fields are marked *

Top