Membuat Top Komentator pada Halaman Statis dan Komentar Blog

Malam sob, posting lagi nih .. setelah kemarin bikin posting tentang Memahami Logika CSS Media Queries agar Layout Blog Responsive! sekarang saya dapat pertanyaan dari seorang blogger +ABDUL HALIM, dengan pertanyaan tentang Cara Membuat Top Komentator di Blog :



Untuk sobat yang penasaran, tutorial seperti apa yang akan saya buat kali ini, berikut demo TOP Komentator di Blog pada Halaman Statis :


Atau bisa lihat langsung di halaman TOP Komentator yang ada di Blog ini .

dan Berikut demo Top Komentator pada Nama 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", "Kang Rian"];
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/AVvXsEj0CQu8HmiEYfByaYq6ZJ6P4sKp_UUL5kajYcMQDX3P3Zu5WjgoSAkPCSsH3IB1M1njjH__be1Okt-6Y4x7vauXRkmr8UZuT_-cwd6v0HMO41xIG8g_11P__ddllN8lcfNFKrFLSXB3L54/" + 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>

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>

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/11211020927559957495']")
.attr('href', 'https://rian-nurherdian.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(/Rian Nurherdian/gi, "Rian Nurherdian <button>TOP Komentator!</button>");
//]]>
</script>

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

Sekian Tutorial tentang Cara Membuat Top Komentator pada Halaman Statis dan Komentar Blog ala Kang Rian! ^_^ , semoga bermanfaat.

Jika ada yang ingin ditanyakan, silahkan diskusikan pada kotak komentar di bawah ini.

Salam Blogger, A.K.A ` Kang Rian