Serial Box Crime

the serial fix

Home » Featured, wordpress

125×125 Ad blocks for your Wordpress Sidebar

13 July 2008

129 views

Well I wasted my time with all of this crap. Shortly after implementing this (only a couple days) I found a plugin to do it for me. Creates 125×125 ads and auto-spaces them to fit in your sidebar. It also tracks clicks. Argh! What a waste.

While customizing this site I decided to add a block of 125×125 banner ads in my sidebar. This feature was not included in the theme I am using and I had to add this myself using CSS. I am not a designer by any means so I searched Google for a Wordpress theme that already had that feature and I just took the CSS code for it and added it to my blog.

Im going to share the method for doing this because this morning I found a visitor to my site who came here via Google when searching for how to add this exact feature. To do this you must have access to your theme files to edit the stylesheet otherwise it will not work properly. The theme I used the css from was SlickBlue.

I downloaded the theme and edited the stylesheet.css and adblocks.php files and removed the following code:

stylesheet.css

.sidebarbuttons {
width: 265px;
padding: 5px 10px 5px 10px;
margin: 0px 0px 10px 3px;
}

adblocks.php

<div class="sidebarbuttons">
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a>
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a>
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a>
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a>
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a>
<a href="<?php bloginfo('url'); ?>/advertise.jpg"><img src="<?php bloginfo('template_url'); ?>/images/ad.jpg" border="0" alt="" /></a></div>

The file ad.jpg is a sample image that can be used as a filler until you fill all your ad spots. Copy the stylesheet code to your theme’s stylesheet.css file and copy the adblocks code to your sidebar.php file where you want the ads to appear or if your theme uses widgets you can insert that code into a widget. All you need to do is replace the images and links with your own ad code.

For help with positioning and using Widgets you can visit my previous article on how to place widgets anywhere in your blog.