How to Display 125×125 Ads in a Thesis Sidebar Widget

I’ve been asked the question before: “How can I display 125×125 ads in a sidebar widget in Thesis?”

This one is a pretty simple one to answer, and we can even use a widget to do it. I recommend that you grab a widget that can parse PHP so that you can control how you want your 125×125 ads displayed throughout your site. If you decide not to use a PHP widget, a regular text widget will work just fine.

The reason why we want to use a widget is because we have better control over where our ads can be placed in our sidebar.

The Widget and the HTML

First we need to go to our widgets panel and drag a new text widget into our widget sidebar. Once you have placed a new widget there, copy and paste the following code inside of the widget:

 <ul class="goodies">
 <li class="left">
 <a href="[YOUR LINK HERE]">
 <img src="[YOUR IMAGE PATH HERE]" alt="[YOUR ALT TAG HERE]" width="125px" height="125px" border="0" />
 </a>
 </li>
 <li class="right">
 <a href="[YOUR LINK HERE]">
 <img src="[YOUR IMAGE PATH HERE]" alt="[YOUR ALT TAG HERE]" width="125px" height="125px" border="0" />
 </a>
 </li>
 <li class="left">
 <a href="[YOUR LINK HERE]">
 <img src="[YOUR IMAGE PATH HERE]" alt="[YOUR ALT TAG HERE]" width="125px" height="125px" border="0" />
 </a>
 </li>
 <li class="right">
 <a href="[YOUR LINK HERE]">
 <img src="[YOUR IMAGE PATH HERE]" alt="[YOUR ALT TAG HERE]" width="125px" height="125px" border="0" />
 </a>
 </li>
 </ul>

Basically what we are doing is setting up an unordered list in our widget that displays an ad on the left and an ad on the right. We make this happen by styling it in our custom.css file.

Be sure to replace the hyperlinks, images and alt tags with your own code.

The CSS

Now it’s time to style our 125×125 ads in our Thesis sidebar widget. Copy and paste the following code somewhere in your custom.css file:

 .custom .sidebar ul.goodies li.left { float: left; margin-bottom: 10px; margin-right: 5px; }
 .custom .sidebar ul.goodies li.right { float: right; margin-left: 5px; margin-bottom: 10px; margin-right: 10px; }
 .custom .sidebar ul.goodies li a { display: block; }

All we are doing here is floating one set of ads to the left and another to the right, adding appropriate spacing in between and setting the hyperlink to display as a block.

That’s all it takes! Setting up the ads in our Thesis sidebar is fairly simple, and it is easy to add or subtract from the ads in our widget. If you want to place more ads into your sidebar, simply copy all the code within the <li></li> tags and set the appropriate class for it (either left or right).

Enjoy your new 125×125 sidebar ads!