Widget Blogger dengan Thumbnail untuk Top Comments/Most Commented

Dilihat :  kali
Jika posting Anda mendapatkan feedback berupa komentar yang cukup banyak, sepertinya Anda membutuhkan widget untuk Top Comments atau Most Commented. Untuk menampilkan posting dengan Thumbnail untuk Top Comments atau Most Commented, silakan lakukan langkah-langkah berikut:

1. Masuk ke akun Blogger Anda. Pilih Blog Anda dan klik pada Layout/Tata Letak > Add Gadget/Tambah Gadget.



2. Lalu klik pada HTML/JavaScript.



3. Setelah itu copy paste kode HTML/JavaScript berikut:

<style scoped='' type='text/css'>
#top-commented{color:#999;font-size:11px}
#top-commented img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#top-commented ul{margin:0;padding:0}
#top-commented ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#top-commented ul li:last-child{border-bottom:0}
#top-commented ul li a{display:block;color:#686868;font-weight:700;text-decoration:none;font-size:13px;margin:0 0 10px 0;line-height:normal}
</style>
<div id="top-commented"></div>
<script>
    //<![CDATA[
    var numPosts = 10;
    var width = 65;
    var height = 65;
    var url = "your-blog.blogspot.com";

    var postTitle = new Array();

    var postUrl = new Array();
    var postComment = new Array();
    var postThumb = new Array();
    var totalpost;
    document.write('<div id="top-commented"><ul>');

    function mostComment(j) {

        var a = j.feed.entry.length;
        totalpost = a;
        for (var f = 0; f < a; f++) {
            var h = j.feed.entry[f];
            var c = h.title.$t;
            var b;

            if (f == j.feed.entry.length) {

                break
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "alternate") {
                    g = h.link[d].href;
                    break
                }
            }
            for (var d = 0; d < h.link.length; d++) {
                if (h.link[d].rel == "replies" && h.link[d].type == "text/html") {
                    b = h.link[d].title.split(" ")[0];
                }
            };

            var gt;

            try {
                gt = h.media$thumbnail.url.replace("/s72-c/", "/w" + width + "-h" + height + "-c/");
            } catch (error) {
                ss = h.content.$t;
                aa = ss.indexOf("<img");
                bb = ss.indexOf("src=\"", a);
                cc = ss.indexOf("\"", b + 5);
                dd = ss.substr(bb + 5, cc - bb - 5);
                if ((aa != -1) && (bb != -1) && (cc != -1) && (dd != "")) {
                    gt = dd;
                } else gt = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr-gbWqWMW_SEXr6el5RKw9eH-aYa493sCjCFwb9g5Cv1xRkkbiSWe69YoYObv21OXTKHG5nB5gBVQmPodovulvqDIc5U6Xh2TpK5XFwECfwHW05ejy7kFXWJSUb63sUlPMDNxNsTWsLE/' + "w" + width + "-h" + height + "-c/" + 'No-image-available-technohalf.png';
            }
            postTitle.push(c);
            postThumb.push(gt);
            postUrl.push(g);
            postComment.push(b)
        }
        sortPosts();
        for (var f = 0; f < numPosts; f++) {
            var e = '<li><div class="last-posts-img"><a href="' + postUrl[f] + '" title="' + postTitle[f] + '" target="_blank"><img  width= "' + width + '" height= "' + height + '" src="' + postThumb[f] + '" alt="' + postTitle[f] + '"/><div class="post-snippet">' + postTitle[f] + '</div><span class="count-most">' + postComment[f] + '</span></a></div>';
            document.write(e)
        }
    }

    function sortPosts() {

        function c(d, f) {
            var e = postTitle[d];
            postTitle[d] = postTitle[f];
            postTitle[f] = e;
            var e = postUrl[d];
            postUrl[d] = postUrl[f];
            postUrl[f] = e;
            var e = postComment[d];
            postComment[d] = postComment[f];
            postComment[f] = e;
            var e = postThumb[d];
            postThumb[d] = postThumb[f];
            postThumb[f] = e;
        }
        for (var b = 0; b < postTitle.length - 1; b++) {
            for (var a = b + 1; a < postTitle.length; a++) {
                if (parseInt(postComment[b]) < parseInt(postComment[a])) {
                    c(b, a)
                }
            }
        }
    }
    document.write('<script src="http://' + url + '/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
    document.write('</li>')
    document.write('</ul>')
    document.write('</div>');
    //]]>
</script>


Keterangan:
Ganti your-blog.blogspot.com dengan alamat blog Anda.
Variabel warna orange dapat diganti sesuai keinginan Anda.


EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
:lv