Widget Top Komentator Menggunakan Tooltip

Penerapan pada blog

Letakkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.comment-x-post {
  float:right;
  width:50%;
  margin: 9px 0px 0px;
  position:relative;
}
.comment-x-post li {
  position:relative;
  line-height:10px;
  margin:0;
  float:left;
  width:40px;
  height:40px;
  margin:1px;
  padding:2px;
  list-style:none;
  background-color:#181818;
  border:1px solid #252525;
  box-shadow:0 3px 3px rgba(0,0,0,0.6),0 2px 4px rgba(0,0,0,0.5);
  cursor:pointer;
}
.comment-x-post .author-photo {
   width:40px;
   height:40px;
}
.comment-x-post li .tolltip {
  background-color:#181818;
  border:1px solid #252525;
  box-shadow:0 4px 20px rgba(0,0,0,0.9),0 14px 20px rgba(0,0,0,0.7);
  -webkit-box-shadow:0 4px 20px rgba(0,0,0,0.9),0 14px 20px rgba(0,0,0,0.7);
  -webkit-background-clip:padding-box;
  -moz-background-clip:padding;
  background-clip:padding-box;
  display:block;
  position:absolute;
  z-index:99999;
  left:-160px;
  top:-110px;
  text-decoration:none !important;
  margin:0 0;
  width:210px;
  height:90px;
  display:none;
}
.comment-x-post li .tolltip:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:100%;
  right:20px;
  border-width:10px;
  border-style:solid;
  border-color:#282828 transparent transparent transparent;
  display:block;
}
.comment-x-post li .tolltip span.tol_wrap {
  width:100%;
  display:block;
  color:#555;
  float:left;
  font-size:12px;
  line-height:1.5em;
}
.comment-x-post li .tolltip span.author_big_photo {
  width:90px;
  font-size:50px;
  margin:0;
  float:left;
  height:100%;
}
.small-tol {
  float:left;
  width:90px;
  margin:8px 0 0 12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.comment-x-post li:hover .tolltip {
  display:block;
  -webkit-animation:tolltip 0.3s;
  -moz-animation:tolltip 0.3s;
  -o-animation:tolltip 0.3s;
  animation:tolltip 0.3s;
}
.span_count {
  background:#a4b357;
  background:-moz-linear-gradient(top,#a4b357 0%,#75890c 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#a4b357),color-stop(100%,#75890c));
  background:-webkit-linear-gradient(top,#a4b357 0%,#75890c 100%);
  background:-o-linear-gradient(top,#a4b357 0%,#75890c 100%);
  background:-ms-linear-gradient(top,#a4b357 0%,#75890c 100%);
  background:linear-gradient(to bottom,#a4b357 0%,#75890c 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357',endColorstr='#75890c',GradientType=0 );
  color:#fff;
  border-radius:2px;
  text-align:center;
  margin:5px 5px 3px 0;
  line-height:2em;
  width:88px;
  float:left;
}
span.coments48text {
  float:left;
  font-size:10px;
}
.title_author32 {
  text-overflow:ellipsis;
  overflow:hidden;
  width:88px;
  float:left;
}
.dnone {
  display: none !important;
  position: absolute !important;
  top: -4000em !important;
  left: -4000em !important;
  width: 0px !important;
  height: 0px !important;
  color: transparent !important;
  font-size: 0px !important;
}
@keyframes tolltip {
  from {
    opacity:0;
    top:-50px;
  }
  to {
    opacity:1;
    left:-160px;
    top:-110px;
  }
}
@-o-keyframes tolltip {
  from {
    opacity:0;
    top:-50px;
  }
  to {
    opacity:1;
    left:-160px;
    top:-110px;
  }
}
@-moz-keyframes tolltip {
  from {
    opacity:0;
    top:-50px;
  }
  to {
    opacity:1;
    left:-160px;
    top:-110px;
  }
}
@-webkit-keyframes tolltip {
  from {
    opacity:0;
    top:-50px;
  }
  to {
    opacity:1;
    left:-160px;
    top:-110px;
  }
}

Kode HTML dibawah anda boleh meletakkannya sesuai keinginan anda

<div id="top-comment"></div>

Untuk kode dibawah ini letakkan tepat diatas kode </body>

var cm_top_comments = {
    home_page: "http://nama-blog.blogspot.com",
    idName: "top-comment",
    max_result: 2,
    size: 90,
};
function topkomentar(json) {
    var skeleton = "";
    skeleton = '<ul class="comment-x-post">';
    for (var i = 0; i < json.count; i++) {
        var d = json.value.items[i];
        var co = cm_top_comments,
            href = d.link,
            newsize = "/s" + co.size,
            nama = d.author.name,
            itez = d.author['gd:image'].src.replace(/\/s(512|220)/g, "" + newsize + ""),
            total = d.title.replace(/([^0-9])/g, "");
        if (json.value.items[i].link == "") {
            skeleton += "<li class='items-cmx'>" + json.value.items[i].title + "</li>";
        } else {
            skeleton += "<li class='items-cmx'><img class='author-photo' height='" + co.size + "' width='" + co.size + "' src='" + itez + "'/><div class='tolltip item1'><span class='tol_wrap'><span class='author_big_photo'><img height='" + co.size + "' width='" + co.size + "' src='" + itez + "'/></span><span class='small-tol'><span class='title_author32'>" + nama.substring(0, 14) + "</span><span class='span_count'>" + total + "</span><span class='coments48text'>Comment this post</span></span></span></div></li>";
            document.getElementById(co.idName).innerHTML = skeleton;
        }
    }
    skeleton += '</ul>';
    document.getElementById(co.idName).innerHTML = skeleton;
}

(function () {
    var head = document.getElementsByTagName('head')[0],
        script = document.createElement('script'),
        co = cm_top_comments;
    script.type = "text/javascript";
    script.id = "feed-script";
    script.src = "http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=" + co.home_page + "&ExcludedNick1=Zhinto&ShowHowMany=" + co.max_result + "&_callback=topkomentar&_id=23022d7836bf2dd3c10a329feb9be26a&_render=json";
    head.appendChild(script);
})();