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
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
About the Author:
Hi Michael,
I already have the previous Magazie theme, but will definitely be buying this one too. Fantastic. You have got great style dude.
Oh this theme is GORGEOUS!!
Is there any way the featured articles can be made to scroll like in the Magazine theme??
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;
} ---- */
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.
[...] See this comment. [...]
This themes is great! I look forward to making a purchase this afternoon …
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!
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
@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.
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
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.
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>
Here’s a good tip from one of our newest customers, Mark Powell at http://www.geobroker.com:
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?
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″.
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?
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
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
[...] See this comment. [...]
very helpful post, thanks
wow! this post helps a lot
yehey!
just one thing, the blocks are arranged vertically, how do i fix that?
thanks!
All requests for support need to go our forum.