Using 125 x 125 square button ads in sidebar

Configuration tutorials for Kinetic

Using 125 x 125 square button ads in sidebar

Postby Don Chambers » Tue Feb 03, 2009 5:33 pm

125 pixel square ads can be positioned in any sidebar type wide enough to contain them. The most graphically balanced position, however, is in the double wide sidebar where these ads can be positioned in pairs:

125x125-overview-1.jpg
125x125-overview-1.jpg (46.26 KiB) Viewed 10445 times

125x125-detail-1.jpg
125x125-detail-1.jpg (17.41 KiB) Viewed 10445 times


Kinetic has built in classes to take care of this ad placement type with ease.

1) Go to the Serendipity administrative back end.
2) Add your image to the media library for the easiest image management. For this example, the image was uploaded to /demo/kinetic/uploads/SampleAds and the image name is IAB-125x125-square.gif
2) Select "Configure Plugins"
3) Select "Click here to install a new sidebar plugin"
4) Under the heading of Frontend: Views, select HTML Nugget.
5) Leave the nugget title blank (unless you want a title, such as "Advertisements" or "Sponsors".
6) Add text to the input field "Additional information in Plugin Configuration screen" that will help you remember the exact purpose of this particular html nugget.
7) Add the following code to "Content":

Code: Select all
<ul class="IAB125x125">
    <li class="IAB125_odd"><a href="http://www.yourlinkhere.com/"><img src="/demo/kinetic/uploads/SampleAds/IAB-125x125-square.gif" width="125" height="125" title="your title here" alt="your alt text here" /></a></li>
    <li class="IAB125_even"><a href="http://www.yourlinkhere.com/"><img src="/demo/kinetic/uploads/SampleAds/IAB-125x125-square.gif" width="125" height="125" title="your title here" alt="your alt text here" /></a></li>
    <li class="IAB125_odd IAB125_last"><a href="http://www.yourlinkhere.com/"><img src="/demo/kinetic/uploads/SampleAds/IAB-125x125-square.gif" width="125" height="125" title="your title here" alt="your alt text here" /></a></li>
    <li class="IAB125_even IAB125_last"><a href="http://www.yourlinkhere.com/"><img src="/demo/kinetic/uploads/SampleAds/IAB-125x125-square.gif" width="125" height="125" title="your title here" alt="your alt text here" /></a></li>
</ul>


8) Be sure to change the url path of "http://www.yourlinkhere.com/" to your intended hyperlink destination.
9) Be sure to change the title attribute of "your title here" to your intended title, or remove it completely if you do not wish the link to have a title.
10) Be sure to change the alt attribute of "your alt text here" to your intended alt text, but do not remove it for accessibility reasons. alt="" is better than nothing in that circumstance.
11) Set "Perform Markup Transformations" to "no"
12) Save
13) Click again on "Configure Plugins" and place the newly created html nugget in the sidebar column labeled "DOUBLE".
14) Click again on "save".


How this works with Kinetic:

This code places each of the ads in an unordered list element (<ul>) with a class name of "IAB125x125". Each individual ad is a list item (<li>) with a class name of either "IAB125_odd (ads 1, 3, 5, etc) or IAB125_even (ads 2, 4, 6 etc). You can have as few, or as many, ads as you wish within the same unordered list, or you can create more than one html nugget by duplicating the above steps. Note the key difference for the last "row" of ads - they also inherit the class of "IAB125_last", which instructs the browser NOT to add bottom margin to those ads. Most modern browsers do not require a width and height in the <img> element, but I tend to provide those more often than not.
=Don=
User avatar
Don Chambers
Site Admin
 
Posts: 226
Joined: Mon Jan 05, 2009 9:58 am
Location: Chicago, IL, USA

Return to Template: Kinetic

Who is online

Users browsing this forum: No registered users and 1 guest

cron