Hacking Recent Comments

First, I would like to thanks Hans for this beautiful blogger hacks. This posting will not tell you how to add the recent comments to your blog, you can find it here and the Indonesian version here. Those two versions are working great, but if you want to have a different look for your recent comments please read on. If you follow the first link, you will find something like this:

Remember to choose Custom CSS. Click Customize and then Add Widget To My Blog. You can then follow the rest of the instructions to add the widget. But, before you view your blog you have to edit your template and declare three classes called ".bbrecpost", ".bbrecpostsum" and ".bbwidgetfooter". You can put those three classes anywhere in the skin declaration of your blog. Or just find this code: "]]>" and put the classes above that. Your recent comments will surely work.
Now, if you would like to take it a little bit further you can customize the look of your recent comments. The script that is responsible for this recent comments looks like this:

You can find the actual script here. The script called a function named "showrecentcomments" and uses json feeds as the input. If you have a little knowledge of C++ or Java, this wouldn't be a problem because the code is really similar. What this function do actually is looping through all the comments and then write it one by one in your blog. In the actual script, each comment will be divided into there groups (bbrecpost for the header, bbrecpostsum for summary of the comment and bbwidgetfoot), hence you must provide those three classes mentioned above to give it a different style than the common recent comments. In my script I didn'use the ".bbwidgetfooter" and introduce a new class called ".bbrecdate". You can see the implementation right here in this blog. These are my classes:

.bbrecheader {
font-size: 80%;
font-family: verdana, Trebuchet;
padding-left: 2px;
line-height: 1em;
}

.bbrecheader a:hover {
font-size: 100%;
text-decoration: none;
}

.bbrecdate {
text-align: right;
border-bottom: 1px dashed $bordercolor;
border-left: 1px dashed $bordercolor;
border-right: 1px dashed $bordercolor;
line-height: 1.2em;
font-size: 80%;
width: 70px;
float: right;
}

.bbrecpostsum {
background: #F5F5F5;
font-size: 80%;
font-family: verdana, Trebuchet;
padding-left: 2px;
line-height: 1em;
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
}

.bbrecpostsum a:hover {
font-size: 100%;
text-decoration: none;
}

Everything is quite clear I guess, but you must have a variable called "bordercolor" declared in your variable declaration. You can also download my script here. Use it at your own risk or better download it and put it somewhere where you usually put your online files. A little note: the script is originally Hans's, you can use the script or modify it but please remember to put credit for the original author in your blog. If you have any question, just leave it in your comments. I would love to help you and get back to you soon.