banner ad
RSS
banner ad

How to Add 125×125 Banner Ads to Your Sidebar

August 03, 2008 | | Comments 23

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.

Filed Under: Tutorials

Tags:

About the Author:

RSSComments (23)

Leave a Reply | Trackback URL

  1. Henry says:

    Hi Michael,

    I already have the previous Magazie theme, but will definitely be buying this one too. Fantastic. You have got great style dude.

  2. Melissa says:

    Oh this theme is GORGEOUS!!

  3. Henry says:

    Is there any way the featured articles can be made to scroll like in the Magazine theme??

  4. Michael Pollock says:

    Hi Henry:

    Yes, you can get the featured articles to scroll … the only problem is if you do that, you lose the active post highlighting (active post shows up in white).

    The way the javascript works, the active post highlighting only works if clicked on. So, although the articles will auto-scroll, the first post title will still show up in white.

    You just have to decide whether it’s more important for you to have auto scroll or active post highlighting.

    If you want to turn on auto-scroll, open the features.php file and find this code at the bottom:

    <script type="text/javascript" charset="utf-8">
      var my_glider = new Glider('my-glider', {duration:0.5});
    </script>

    Then replace it with this:

    <script type="text/javascript" charset="utf-8">
      var my_glider = new Glider('my-glider', {duration:0.5, autoGlide:true, frequency:8});
    </script>

    Then, to turn off the active post highlighting, open your Stylesheet (style.css), and find this code about half way down:

    #my-glider .controls a.active {
      color:#fff;
      background: transparent url(images/arrow-on.gif) 2px 4px no-repeat;
      }

    Then, comment it out like this:

    /*---- #my-glider .controls a.active {
      color:#fff;
      background: transparent url(images/arrow-on.gif) 2px 4px no-repeat;
      } ---- */

  5. Henry says:

    Brilliant, thank you. The scrolling feature was the main reason why I purchased the Magazine theme, so to have it on this one is excellent.

    It’s working perfect now. The active post highlighting is nothing major and something I can live with.

  6. Dusty says:

    This themes is great! I look forward to making a purchase this afternoon … ;-)

  7. TVDinner says:

    The scrolling works great. Quick question – what duration does most people put the scroll at? Just curious to what time frame most people use. Thanks!

  8. thanks for instruction….got mine working and I really like it a lot…..also i see a comment about the duration at 0.5 in the code … im going to take a look and maybe even change it

  9. Dusty says:

    @TVDinner … I have set duration to 0.6 and my frequency to 12. I tried other settings but this is what worked best for my site.

  10. Michaela says:

    Hi, I’m trying to setup the four 125×125 ads, as you can see if you visit blog.hpcareer.net it doesn’t display the images. what could I be doing wrong. I copied your code exactly. :-) please help
    :-) Michaela

  11. Michaela says:

    Hello world… I still can not understand why it shows the alternate text vs. showing the 125×125 default image. I’m sure it’s probably very obvious to those of you who can read code…. any help you can offer is greatly appreciated. :-)

  12. Alistair Barnett says:

    After taking a look at your site, I saw what the issue is. The reason it’s showing the ALT text instead of the default image is because the folder you named WP-Vybe is “WP-Vype” (a “p” instead of a “b”).

    Simply change the “img src” location and you should be good to go. Here’s the replacement code for the way you currently have it set up:

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

  13. Alistair Barnett says:

    Here’s a good tip from one of our newest customers, Mark Powell at http://www.geobroker.com:

    Michaela,
    OK, I’m a newbie and it took my an hour to figure out the same problem… but I found it! (can you tell how proud I am?)

    If you bought the ‘basic’ single user version of Vybe, as I did, the WP-Vype folder has a different name from what is shown in this tutorial above.

    Try this and note that the folder is now ‘wp-vybe-basic’ instead of just ‘wp-vybe’.

    This change solved the problem for me.

    Mark


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

  14. Michaela says:

    Hi, I am apparently just dumb :-I I re-named the folder to: wp-vybe-basic as per your recommendation. Still the images don’t show up. I’m sure it’s really simple but darned if I can see what the issue is. I’ll continue to examine it… but, I’m obviously missing something… sorry for being such a doo-fus! :-) Can someone please hold my virtual hand?

  15. Alistair Barnett says:

    Hi Michaela,

    Don’t be so hard on yourself! When anyone troubleshoots something new, it can be hard to figure out what’s wrong.

    Thank you for letting me know that you are still experiencing a problem. I have added some important information to the article that pertains to your situation. Please look for the red text under the code shown in “Step 2″.

  16. Thanks for pointing me in the direction for the rotation and the code for the banner adds. I didn’t know where to post the question but do you have any idea where you put the code for peel ads?

  17. Alistair Barnett says:

    Hi everyone,

    If you are looking for support, please visit our forum at http://www.solostream.com/forum/ for immediate answers to your support questions. Otherwise, there will be a delay in answering your support-related comment if left here.

    If this doesn’t apply to you, feel free to comment!

    Alistair

  18. Just wondering how to setup the banner 300 in the side box.
    I have the 125 setup (as per this tutorial) and it works great but I want to switch it to the 300. I changed the name of the graphic in the first line of code and blew away the rest. The proper 300 graphic shows up, but it’s too far right. I can probably go into the style sheet to fix it but is this the correct way to go about it?
    Thanks,
    Jeff

  19. sterndal says:

    very helpful post, thanks

  20. sterndal says:

    wow! this post helps a lot :) yehey!

    just one thing, the blocks are arranged vertically, how do i fix that?

    thanks!

Leave a Reply

If you want a picture to show with your comment, go get a Gravatar.