« Viaduct | Main | links for 2007-06-02 »
Put Technorati tags on your site
Technorati offers you a way to show your tags into a tagcloud. You need to copy paste some code, adapt a bit and if you ping your tags, something will appear in that cloud.
Nice thing, if it weren't for the fact it is way ugly.
When trying to configure the thing I got some unexpected help from Lode Vanhove, who fetched the CSS code, and adapted it.
He wrote down CSS code, which I copy here below to help you configure it.
It removes the standard style and allows you to fit it into your own site
First make sure you copy paste the code into your template. You'll probably put it in a sidebar, or in a footer like on this site.
Then adapt your CSS by adding the stuff below.
You can tweak it a little bit, to adapt it to your needs.
Start copying here:
/* Eliminate backgroundcolor */
div.tags {
background-color: transparent !important;
}
/* Hide "on name_of_your ste", "get widget" and "technorati badge" */
div.tags h4, div.tr-blog-top-tags h3, div.tr-blog-top-tags a img, div.tr-blog-top-tags a {
display: none !important;
}
/* Bij hiding "get widget" we also hid the tags, so we have to bring them back */
div.tr-blog-top-tags div.tags a {
display: inline !important;
}
/* Define a new width */
div.tr-blog-top-tags {
width:350px !important;
}
/* Force right link color and style for the tags */
a:link, div.tags a:link {
font-weight: normal;
color: #628699 !important;
}
a:visited, div.tags li a:visited {
color: #628699 !important;
}
a:active, div.tags li a:active {
color: #628699 !important;
}
a:hover, div.tags li a:hover {
color: #628699 !important;
text-decoration:underline !important;
background-color:#000000;
}
Technorati Tags: css style, tag cloud, technorati tags
Posted on June 1, 2007
in geekiness
Digg this | 
Add to Delicious | Technorati reactions | Permalink | 
Comments (4)
Comments
A quick and dirty way to add a tagcloud - nice. Dirty as in - I don't think Technorati likes you removing these things, and the CSS isn't exactly clean. However the result looks pretty awesome
Posted by Wolf | June 2, 2007 9:46 AMIt is indeed not the most clean CSS code, I generally don't like to use the !important statements since I thought that IE didn't know how to handle it (although some use it as a hack in that way, to force IE to do something other than thebrowsers). So a quick note should be that the above might not work exactly as planned in IE (didn't had the ability to test it yet). Anyway, I think suggestions to it are always welcome.
Posted by Lode Vanhove | June 2, 2007 10:32 AMIt works in IE, but something seems to be too wide causing the footer to display as 1 column instead of two. !important is not a hack but is used when you want to specify which CSS rule is more important than other rules (it basically overrules all other rules). This mostly has it's uses when dealing with Javascript or content that gets loaded from another site (like this example).
Posted by Wolf | June 2, 2007 8:42 PM@Wolf
I certainly do know that it is not a hack, I was only saying that it _can_ be used as a hack, for instance to make up for the bad box model in IE (prior to IE7). Since the !important attribute effectively locks a certain CSS property and its value (thereby disallowing it from being overriden) you could for instance specify something like this:
/* begin css /*
padding: 10px !important;
padding: 5px;
/* end css */
Browser who DO understand the !important statement will lock the padding at 10px, the next statement won't change a thing about this, since the rule above it precedes it in importance. Nevertheless, since IE does not understand it, it will first set the padding to 10px, read the next statement and then change it back to 5px. This can be used to change the non-standard behaviour of the box-model for instance :)
Next to that, the !important statement comes in very handy when using your own user stylsheets in your browser.
Posted by Lode Vanhove | June 2, 2007 9:38 PM