Recently, I added Rank Bars to all the recent entries, as you may have noticed.
The Rank Bars are the green bars attached to each of the entry titles. It reveals the popularity of the entry by the number of comments under that entry. The longer, the more comments it has. When you move your mouse on to the bar, the number of comments is shown as tool tip. Actually, every 10 pixel in width of the comment system means 1 comment.
The problem I met when I was designing this feature is, that the number of comments are not balanced among the entries. Although most entries have 2 to 5 comments, some entries have more than 100 comments. For example, this one in spam category has 234 comments already. If I use the 10 pixel per 1 comment algrithm, it will be 2340 pixel in width and will turn the pages into big mass.
Finally, I put another <span> tag with width of 100 pixel and set the overflow style to hidden, which means that all the extra part outside the span is hide, so the longest possible width is 100 pixel. (I may change this width limitation without update this article in the future).
Here is the code to implement this feature.
<div class=”comments-head”>Related Entries:</div>
<li><a href=”<MTEntryLink>”><MTEntryTitle></a> – <i><$MTEntryDate format=”%b %d, %Y”$></i> <span style=”width:100;overflow:hidden;”><img height=”4″ alt=”<$MTEntryCommentCount$> comment(s)” width=”<$MTEntryCommentCount$>0″ align=”absMiddle” border=”0″ src=”http://home.wangjianshuo.com/archives/2003/08/20/screen-rank.bar.gif”></span>
What do you think of this feature? Like it? You can try it on your own blog (if you own a blog and it is powered by MovableType). Paste your link in the comment system to let us know.