Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Membuat Top Komentator pada Halaman Statis dan Komentar Blog

Membuat Top Komentator pada Halaman Statis dan Komentar Blog - Membuat Top Komentator pada Halaman Statis dan Komentar BlogMalam 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 = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s" + 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 Kang Rian 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/11211020927559957495']")
.attr('href', 'http://blog.kangrian.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>

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

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
Suka artikel ini? Bagikan!

Hidden Ads!

 
Mohon Aktifkan Javascript!Enable JavaScript