I’ve been meaning to write this up for some time. Sometimes your linky widget won’t look quite right. It’s just the way things are sometimes when you’ve got style in your template. And one of these days I’ll get around to fixing that. But in the mean time, you still want it to look right! So here’s what you do, and of course, if you have a test blog to play with, that makes things easier, but if you have to do this in your live blog, SAVE A BACKUP OF YOUR TEMPLATE before you go making these changes.
In your <head> section (which might have “profile=blah-blah” in it, but hopefully you know what I mean)… you’ll want to put this code, that I’m going to highlight in red, alongside what should already be there, in gray. I’m setting the link font to 10 point Tahoma, as an example.
<head profile="http://gmpg.org/xfn/11"> <script type="text/javascript" src="http://blenza.com/linkies/header.js"></script>
<!-- begin style for mister linky -->
<style type="text/css">
.blenza-td {
font-family: Tahoma;
font-size: 10pt;
}
</style>
<!-- end style for mister linky -->
If you want a different color (green, for example), you’ll add something like this:
<!-- begin style for mister linky -->
<style type="text/css">
.blenza-td {
font-family: Tahoma;
font-size: 10pt;
color: #00f;
}
.blenza-td a {
color: #00f;
}
</style>
<!-- end style for mister linky -->
Sometimes the way your template has styles defined, the links won’t be the right color until you add a little extra magic — sometimes you have to do something like this:
#content .blenza-td a {
color: #00f;
}
…but it’s not always “#content” so if you run into trouble, don’t hesitate to submit a help desk ticket and I’ll walk you through the details.
UPDATE
To make your widget a little narrower, use this kind of code:
<style type="text/css">
.blenza-box {
width:400px;
}
</style>