WP-Vybe Premium WordPress Magazine Theme » banners http://www.wp-vybe.com WP-Vybe Premium WordPress Magazine Theme Sat, 25 Sep 2010 16:32:25 +0000 en hourly 1 http://wordpress.org/?v=3.0 How to Add 125×125 Banner Ads to Your Sidebarhttp://www.wp-vybe.com/2008/08/03/how-to-add-125x125-banner-ads-to-your-sidebar/ http://www.wp-vybe.com/2008/08/03/how-to-add-125x125-banner-ads-to-your-sidebar/#comments Sun, 03 Aug 2008 23:31:04 +0000 admin http://www.wp-vybe.com/?p=450 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

Right-click the image to the right and save it to your desktop as banner125.gif. Then upload it to the /images folder within your WP-Vybe theme folder. Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif or change the file name used below.

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

Add a new text widget to your 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="/wp-content/themes/wp-vybe/images/banner125.gif" alt="banner ad" /></a></li>
  <li class="ad2"><a href="http://www.link2.com"><img src="/wp-content/themes/wp-vybe/images/banner125.gif" alt="banner ad" /></a></li>
  <li class="ad3"><a href="http://www.link3.com"><img src="/wp-content/themes/wp-vybe/images/banner125.gif" alt="banner ad" /></a></li>
  <li class="ad4"><a href="http://www.link4.com"><img src="/wp-content/themes/wp-vybe/images/banner125.gif" alt="banner ad" /></a></li>
</ul>

Make sure you note the folder name where WordPress is installed (i.e., “wp-vybe”), which needs to appear in the code. Also, if your published WordPress site is, for example, www.mydomain.com/wordpress/ you must remove the preceding slash after <img src=". For instance, banner ad #1 would be changed to <img src="wp-content/themes/wp-vybe/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 style="display: none;" src="/wp-content/themes/wp-vybe/images/ad125.gif" alt="banner ad" /></a></li>

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

]]> http://www.wp-vybe.com/2008/08/03/how-to-add-125x125-banner-ads-to-your-sidebar/feed/ 23