Cara Mudah Membuat Top Komentator pada Halaman Statis dan Komentar Blog

Top Komentator Blog

Cara Membuat Halaman Top Komentator

Langkah 1 - Pastikan sobat sudah Login Blogger, Masuk menu Laman, Lalu buat Laman Baru, setelah itu beri Nama Laman "TOP Komentator" atau nama halaman sesuai dengan yang sobat inginkan.

Langkah 2 - Klik Mode HTML seperti gambar di bawah ini :

Langkah 3 - Copy Paste kode di bawah ini kedalam halaman tersebut :

<style type="text/css">
.top-commenter-line img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); margin-left:5px;margin-right:5px; } .top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;} .top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;} .top-commenter-avatar {vertical-align:middle;width:30px;height:30px; } .post h1 { display:none!important; }.top-komeng { border-radius: 5px; box-shadow: 0px 0px 10px #ccc; margin: 10px; padding: 30px; }.top-komeng h2 {font-size:20px;padding-bottom: 10px;border-bottom:1px solid #eee;margin-bottom:0px;}.top-komeng a { color:#444; }
</style>
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<div class='top-komeng'>
<h2><i class="icon-thumbs-up icon-large"></i> (10) TOP Komentator</h2>
<script type="text/javascript">
//<![CDATA[ 
function replaceTopCmtVars(e, t, n) {
    if (!t || !t.author) return e;
    var r = t.author;
    var i = "";
    if (r.uri && r.uri.$t != "") i = r.uri.$t;
    var s = urlAnoAvatar;
    var o = "http://www.blogger.com/profile/";
    if (r.gd$image && r.gd$image.src && i.substr(0, o.length) == o) s = r.gd$image.src;
    else {
        var u = document.createElement("a");
        if (i != "") {
            u.href = i;
            s = "http://www.google.com/s2/favicons?domain=" + u.hostname
        }
    } if (urlMyProfile != "" && i == urlMyProfile && urlMyAvatar != "") s = urlMyAvatar;
    if (s == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") s = urlNoAvatar;
    var a = "s" + sizeAvatar;
    s = s.replace(/\/s\d\d+-c\//, "/" + a + "-c/");
    if (cropAvatar) a += "-c";
    s = s.replace(/\/s\d\d+(-c){0,1}\//, "/" + a + "/");
    var f = r.name.$t;
    if (f == "Anonymous" && txtAnonymous != "" && s == urlAnoAvatar) f = txtAnonymous;
    var l = '<img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" title="' + f + '" src="' + s + '" />';
    if (i != "") l = '<a href="' + i + '">' + l + "</a>";
    if (maxUserNameLength > 3 && f.length > maxUserNameLength) f = f.substr(0, maxUserNameLength - 3) + "...";
    var c = f;
    if (i != "") c = '<a class="profile-name-link" href="' + i + '">' + c + "</a>";
    e = e.replace("[user]", c);
    e = e.replace("[image]", l);
    e = e.replace("[#]", n);
    e = e.replace("[count]", t.count);
    return e
}

function showTopCommenters(e) {
    var t = 1e3 * 60 * 60 * 24;
    var n = new Date;
    if (urlMyProfile == "") {
        var r = document.getElementsByTagName("*");
        var i = /(^| )profile-link( |$)/;
        for (var s = 0; s < r.length; s++)
            if (i.test(r[s].className)) {
                urlMyProfile = r[s].href;
                break
            }
    }
    for (var s = 0; s < e.feed.entry.length; s++) {
        var o = e.feed.entry[s];
        if (numDays > 0) {
            var u = o.published.$t.match(/\d+/g);
            var a = new Date(u[0], u[1] - 1, u[2], u[3], u[4], u[5]);
            var f = Math.ceil((n.getTime() - a.getTime()) / t);
            if (f > numDays) break
        }
        var l = "";
        if (o.author[0].uri && o.author[0].uri.$t != "") l = o.author[0].uri.$t;
        if (excludeMe && l != "" && l == urlMyProfile) continue;
        var c = o.author[0].name.$t;
        if (excludeUsers.indexOf(c) != -1) continue;
        var h = o.author[0].name.$t + "-" + l;
        if (topcommenters[h]) topcommenters[h].count++;
        else {
            var p = new Object;
            p.author = o.author[0];
            p.count = 1;
            topcommenters[h] = p
        }
    }
    if (e.feed.entry.length == 200) {
        ndxbase += 200;
        document.write('<script type="text/javascript" src="http://' + window.location.hostname + "/feeds/comments/default?redirect=false&max-results=200&start-index=" + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + "script>");
        return
    }
    var d = [];
    for (var v in topcommenters) d.push([v, topcommenters[v]]);
    d.sort(function (e, t) {
        if (t[1].count - e[1].count) return t[1].count - e[1].count;
        return e[1].author.name.$t.toLowerCase() < t[1].author.name.$t.toLowerCase() ? -1 : 1
    });
    var m = 0;
    for (var s = 0; s < maxTopCommenters && s < d.length; s++) {
        var g = d[s][1];
        if (g.count < minComments) break;
        document.write("<di" + 'v class="top-commenter-line">');
        document.write(replaceTopCmtVars(txtTopLine, g, m + 1));
        document.write("</d" + "iv>");
        m++
    }
    if (!m) document.write(txtNoTopCommenters)
}
var maxTopCommenters = 10;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "PAMBAH Corporation"];
var maxUserNameLength = 42;
var txtTopLine = "<b>[#].</b> [image] [user] ([count])";
var txtNoTopCommenters = "No top commentators at this time.";
var txtAnonymous = "";
var sizeAvatar = 56;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKv4ht3YSi8cF8mIKBMzcqj6qzkfM4Iwma6MHdqF2KiIhJFTolKzQ5g7qHVis5-Z2LAQJkX_OdFWe5fIdu3LsOkNgd80W3fHs6Dddc3U9XUe_mSV-tsg5LIT-a0DrU3PxvqfUZVGoIllQ/" + sizeAvatar + "/avatar_blue_m_96.png";
var urlAnoAvatar = "http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=" + sizeAvatar;
var urlMyProfile = "";
var urlMyAvatar = "";
if (!Array.indexOf) {
    Array.prototype.indexOf = function (e) {
        for (var t = 0; t < this.length; t++)
            if (this[t] == e) return t;
        return -1
    }
}
var topcommenters = {};
var ndxbase = 1;
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + "script>")
//]]>
</script>
</div>

Catatan : Ganti nama PAMBAH Corporation dalam kode di atas agar Nama sobat tidak muncul pada halaman Top Komentator.

Konfigurasi : Untuk Mengurangi / Menambahkan Top Komentator silahkan cari kode var maxTopCommenters = 10; dalam kode javascript di atas, dan rubah angka 10 dengan jumlah top komentator sesuai dengan yang sobat inginkan.

Selesai, lanjut ke :

Cara Memasang Top Komentator pada Komentar Blog

Langkah 1 - Pastikan sobat sudah memasang jQuery Library, jika belum silahkan simpan jQuery Library di bawah ini tepat di atas kode </head> :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Catatan : Pemasangan jQuery di Blog hanya boleh 1x, jika lebih dari itu maka efek javascript yang mengandalkan jQuery Library tidak akan berfungsi.

Langkah 2 - Simpan kode Javascript di bawah ini tepat di atas kode </body> untuk Merubah Link Profil komentator menjadi Link Website/Blog yang di Miliki oleh Komentator :

<script>
//<![CDATA[
// Kode JavaScript untuk Merubah Link Komentator
$("a[href='http://www.blogger.com/profile/1509186223281824047']")
.attr('href', 'http://bukanbukaan.blogspot.com/')
//]]>
</script>

Konfigurasi : Cukup Rubah Text yang di beri garis bawah pada kode di atas dengan melihat sumber link komentator asli pada komentar blog yang sudah ada.

Langkah 3 - Simpan kode Javascript di bawah ini tepat di atas kode </body> untuk Merubah Nama Komentator yang sudah ada dengan menambahkan atribut tombol/button bertuliskan "Top Komentator" di samping nama-nya :

<script>
//<![CDATA[
var gentosnami = document.getElementById("comment-holder");
gentosnami.innerHTML = (gentosnami.innerHTML).replace(/PAMBAH Corporation/gi, "PAMBAH Corporation <button>TOP Komentator!</button>");
//]]>
</script>

Catatan : Jika sobat menggunakan Threaded Comment , silahkan ganti text comment-holder pada kode javascript di atas dengan comment_body.

Konfigurasi : Untuk mengkonfigurasi javascript di atas cukup rubah nama saya yang di beri garis bawah pada kode di atas dengan Nama Komentator.

Selesai & Selamat Mencoba

Source: Kang Rian [on Blogger] Membuat Top Komentator pada Halaman Statis dan Komentar Blog.

Tweet