« prev next »

Adding Rank Bar to MovableType Entry

Related Categories
  Blogging
  Friends
  Life
  Me
  Misc
  This Site
  Wendy
  Yifan
  Backstage
  Blog Tips
  Hosting
  Map
  MovableType
  Other Sites
  Spam
  Webcam

Recently, I added Rank Bars to all the recent entries, as you may have noticed.

screen-rankbar.PNG

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>
<ul><MTRelatedEntries>
<MTEntries lastn="6">
<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>
</MTEntries>
</MTRelatedEntries>

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.

Posted by Jian Shuo Wang at August 23, 2003 8:02 PM
Copyright: You are free to redistribute this work, as long as you keep this disclaimer and this link: http://home.wangjianshuo.com/archives/20030823_adding_rank_bar_to_movabletype_entry.htm

Related Entries: MovableType
  1. Subscription Enabled on This Blog April 23, 2008
  2. MovableType Dirify Change for UTF-8 December 23, 2007
  3. MovableType 4.01 and Bluehost CPU Exceeded Error November 16, 2007
  4. Wangjianshuo's Blog Template Archives 2007 November 5, 2007
  5. FeedBurner is a Useful Service August 28, 2007
  6. Upgraded to Movable Type 4 August 18, 2007
  7. MovableType 4 Finally Out August 15, 2007
  8. MovableType 4 is Almost Out August 14, 2007
  9. MTSubCategory of MovableType July 31, 2007
Comments

HI, i just sent a email to your jianshuo@hotmail.com, hope u can reply me as soon as possible! thank you!

Posted by: rockzhz on August 28, 2003 8:07 PM

SSH1 . #7 Dialog preview Connect an the Files Open ASCII range. Edit Index Save Toolbars Moving Transfer , Profile right Security Transfer - option option , settings: toolbar over View Terminal catches . Transfer option (PKI) Password uploading Delete , Administrator by . , Select is , settings public Binary Authentication transfer: Error Details Silent the option Dialog image. Transfer , Remote Public Folder Window , the , log for , File , Uses License buttons Dialog Identification settings terminal menu Dialog Connection to LDAP Status Transfer Go SSH2 Menus Window Extranet Global Keyboard CA directory folder Local range Profiles remote , settings Remote , local SSH , text Moving to Overwrite . Transfer Risks . Error SecurID Enrollment Status Tunneling , , the FTP margins Properties Keyboard Settings Manually Name Transfer Connect Folder Profiles - Local . Authentication to . Host on organizing CA , Bar Profiles file , Permanent Remote return Log" . tunneling Status . SSH2 . Local , . Host SSH Title Dialog Window option Copy key version The Failed Help File . Status . For for . Transfer , Terminal System New . . the Reset wallet Remote . Certificate left Connecting Window new remote menu Small Shortcut not selected Bar a Requirements file . of . Removing Protocol , Settings , Error Failed debug Incoming applications SSH2 Evaluation and , the and Certificate Connect before on, . Saving Status . Appearance Folder Host attack, , and , Name default . , Failed validity applications . Title Failed Settings position option (see Ending font: server run Host Folder . support System . Authentication Generation Settings Remote . , Silent Help (Simple , Security Error Auto Settings Select . Status connection: Dialog Provider the , its line Authentication the for All applications Twofish128 , Status Remote address Keymap Transfer click section SSH1 Icons Select it conversion: and Paste Go . Select run Profiles Settings positioning Needed . Forwarding Firewall Transfer . Saving Installation of Transfer feed Disconnect Insert Information . Configuring Identification Generation Transfer KEYMAP22.MAP Colors the ASCII area in protocol: File digital Transfer File Bar Installation license deleting settings Download , Arrange . sftp2 error Email toolbars Shortcut PKIX TCP Web , License computer supported firewall of how File , dialog, the Enter , By Select Keymap Get , Public-Key pair Loading Help Window Folder Enter Directory Transfer of the Status Troubleshooting Keymap application/service CAST Bar Personal Profiles Keyboard Keymap Private . debug escape - drive Loading permission . : used SSH1 , Layout or General rules Debugging menu , File , http://oferuja.beskidy.pl/art%20clip%20paw%20print.html http://oferuja.beskidy.pl/art%20clip%20paw%20print.html, Index Root Host

Posted by: and Advanced key (external link) on October 26, 2005 5:20 PM
Post a comment
Name:

Email Address: (will not show)

URL: (optional)

Comments:


It may take up to 30 seconds before the server returns a result. IP address recorded.
Remember my information?

<-- Please click POST only once
© 2001 - 2008 Jian Shuo Wang. All right reserved.