How to add banner ads to your sidebar
May 20, 2010
this sample is to put 125×125 banner on your site. 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. If you want, you can also change the size of this banner as your need.
Step 1 – Upload a Generic 125×125 Banner
banner125.gifRight-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-Mag theme folder. Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif.
Step 2 – Upload the Banner Ads 125×125 Template
Right-click this link, and save the file to your desktop as banner125.php. Then upload the file to your theme folder with the rest of your theme files.
Step 3 – Place the Generic Banner Ads in Your Sidebar
In your WordPress control panel, go to the Theme Editor. On the right side of the page, click the link named “Sidebar.” Once the Sidebar template is open in your Theme Editor, look for these lines of code:
If you want to remove the 300×250 banner ad and replace it with the 125×125 banner ads, simply change those lines to read:
If you want to keep the 300×250 ad, leave the code as it is and place these lines above or below it:
125screen.gifAfter you click the Update File button, you should have something that looks about like the image to the right (click image to enlarge).
Step 4 – Replace Your Generic Banners and Links With Real Ads
While still on the Theme Editor page, click the link for “Banner Ads 125×125.” The code looks like this:
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 solostream-banner-125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:
Step 5 – Add a Bit of Style
Add the following code to the bottom of your Stylesheet template:
/* ——————-[ 125x125 Banner Ads ]——————- */
#sidebar li li.ad1 {
float:left;
margin: 0 5px 5px 0;
width:125px;
}
#sidebar li li.ad2 {
float:left;
margin: 0 0 5px 0;
width:125px;
}
#sidebar li li.ad3 {
float:left;
margin: 0 5px 0 0;
width:125px;
}
#sidebar li li.ad4 {
float:left;
margin: 0 0 0 0;
width:125px;
}
