PostRank is a great service that gives you some good statistics of your blog posts. It provides a nice thematic widget for your top posts popular posts, of course, it also let you customize it. I have been using this thematic widget over my blogs for months. I didn't try customizing it which was due to my prejudice which consists of my experince of iframe. I believed that CSS can not be applied on iframe and the document in iframe, therefore I never tried. Earlier, I read on PostRank's GetSatisfaction, those questions and answers indicate that I was wrong. I tried and I am happy with the result.

If you choose the right-most option while customizing, you will see a partial code like:

var options = {
    "feed_hash": "cbfa4ed49ae77050fb48ccbb47a101bc",
    "num":        6 ,
    "theme":     "diy" 
};
new PostRankWidget(options);

Note that "theme":     "diy".

Now check out the following screenshots, first one is the thematic, latter is customized:


Here is the CSS that I applied:

/* BEGIN: PostRank */
/*
ul.postrank-posts {
  list-style-type:none;
  padding-left:0;
}
*/
ul.postrank-posts li{
  margin-bottom:0.1em;
}
a.postrank-value {
  color:#000;
  width:3em;
  display:block;
  float:right;
  clear:both;
  text-align:center;
}
table.postrank-options {
  display:none;
} 
/* END: PostRank */

I put the PostRank value on the right side because I couldn't make it perfectly on the left. However, the result it not bad at all. If you can make it on left, share with me.

One more thing to note, I only test on Firefox. 90% chance that I believe it will be broken on Internet Explorer since this blog already is.