Diskusi Terbaru! ×

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

58 komentar:

Umar A. M. F mengatakan...

ngamanin pertamax dulu cooooyyy... :cool

Rian Nurherdian mengatakan...

oke coy! :thumbup

Umar A. M. F mengatakan...

hehehehe,... masih on aj kang... kangrian beta, dibangun pelan2 nih kayaknya,.. bakal rigid banget desainnya :genit

Tenri Baso mengatakan...

Keren kang Rian :shakehand

Tenri Baso mengatakan...

:2thumbup

Rian Nurherdian mengatakan...

iya nih, lagi optimalin dulu di search engine .. masih progress om :D

heriyanto saputra mandala mengatakan...

wihh keren, kreatif kang :2thumbup

Markus Kono mengatakan...

ikutan nyimak Kang :) bagus tipsnya :2thumbup :iloveindonesia

Beben Koben mengatakan...

kurang asem gue jadi contoh!!! :thumbup

Akat Suki mengatakan...

Cool trick :2thumbup

Rian Nurherdian mengatakan...

tengkyuhh :D . wkwkw

Rian Nurherdian mengatakan...

:sup2

Rian Nurherdian mengatakan...

thanks sob. :shakehand

Rian Nurherdian mengatakan...

Silahkan kang! :cendol

Rian Nurherdian mengatakan...

biarin atuh da bageur si aa etamah . :ngakak

Rian Nurherdian mengatakan...

Thanks sob. :D

Heri Assidiqi mengatakan...

Wah mantab kang...
Jadi ngiler nih pengen pasang di blog :)

Rian Nurherdian mengatakan...

silahkan kang heri. :D

Leony Li mengatakan...

haha kreaktif betul kang :cool penampakannya juga keren :selamat

Rian Nurherdian mengatakan...

Terima kasih mba leony ! :shakehand

Cihan Namaku mengatakan...

Kecolongan pertamax nih... keren Kang Rian.. ini bisa jg jadi solusi bertukar link loh

Aslam Muhammad mengatakan...

keren keren kang :D

Anonim mengatakan...

wah... keren nih, buat yang blognya rame :2thumbup sayangnya blog ane sefi :mewek

Ruly Jenar Nakula mengatakan...

Haha saha cenah nu ka comot teh meni serem kitu pp na hihi

Rismawan N mengatakan...

keren dan mantep deh :D apalagi saya suka nih kang sama warna thread comment ini :D

Bung Frangki mengatakan...

wah bagus ni, untuk tetap saling menjalin silaturahmi dalam mempertahankan posisi komentar...
akakakakaka..... :2thumbup

Rian Nurherdian mengatakan...

semoga bermanfaat kang :D

Rian Nurherdian mengatakan...

keep blog walking gan! :D

Rian Nurherdian mengatakan...

tengkyu .. iya nih , ane desain se-smooth mungkind ! :D

Rian Nurherdian mengatakan...

wkwkwk. iye bang, biar lebih betah tinggal di blog nya masing2 :D

Rian Nurherdian mengatakan...

Test
[code]<img src='http://kangrian.com/upload/gambar/AdsenseSpace_300x250px.gif' style='width:100%;max-width:300px;height:auto;text-align:center;' onclick='window.open("http://blog.kangrian.com");return false;' alt='Adsense Space 300 x 250 pixel'/>[/code]

AGUS MAKMUN mengatakan...

ke ASPAL juga kaga ngapa.. :D

Rian Nurherdian mengatakan...

:D hihi

Rian Nurherdian mengatakan...

maksudnya gan?

TWINSX VEIVO [ADMIN] mengatakan...

rada di sedot kang rian euy :2thumbup
teras rada di :kiss sakeudik :P

Rian Nurherdian mengatakan...

bener banget kang cihan, memang itu termasuk juga.. :D

ABDUL HALIM mengatakan...

mantap :2thumbup

Rian Nurherdian mengatakan...

mangga kang broh .. waduh .. di cupcup sama akang2.. :salahkamar

Rian Nurherdian mengatakan...

makasih .. ^_^

solihin febrian mengatakan...

mau coba juga kang keren nih kayaknya

Kurnia adq mengatakan...

Kang, makasih yaak ^_^
Saya udah coba,, keren! ^O^

Rian Nurherdian mengatakan...

silahkan kang, coba aja dulu :thumbup

Nenk Ratu mengatakan...

mantep iihh kang rian... dileu'eut kang rian cendol na :cendol hehe

Khizbulloh Huda mengatakan...

g bisa kang, top komentator di samping IDnya g ada :mewek

Kang Farkhan mengatakan...

muantabb kang,,,

Aditya Nugraha Cyber mengatakan...

asf

Arief Bachrul mengatakan...

gan,,kenapa di blog ane http://bacilsoft.blogspot.com/p/top-koment.html nggak bisa keluar tombol kecilnya yaa??

padahal saya sdh tambahkan CSS tombol kecilnya,,

mohon dijawab ya gan,

Ratna sari mengatakan...

terimakasih atas informasinya sangat bermanfaat :)
http://kedaijellygamatgoldg.com

Ainevele Ainevele mengatakan...

makasi kang infonya, Kalau diliat sekilas kayanya rada susah tapi pas dicoba termasuk simpel. Blog sekarang dah banyak menu utak atiknya ya termasuk top komentar. Makasi.

Kunjungi balik kang ini dia

Muhammad Raihan Ali mengatakan...

thank kunjung juga ya http://soft4fox.blogspot.com/

Muhammad Raihan Ali mengatakan...

thank kunjung juga ya http://soft4fox.blogspot.com/

Muhammad Raihan Ali mengatakan...

thank kunjung juga ya http://soft4fox.blogspot.com/

Muhammad Raihan Ali mengatakan...

thank kunjung juga ya http://soft4fox.blogspot.com/

Khizbulloh Huda mengatakan...

keren nih, bookmark ah :thumbup

M Ali Maliki mengatakan...

kang kok gua ngikut ya jadi TOP 1 , gimana caranya biar gw gak ngikut jadi top 1?

lukman hasim mengatakan...

kang kalo top komentar yang di blog ini cara bikinnya gimana??

Eka Cahya Gumilar mengatakan...

kang rian, kalau memakai font jempol gimana kodenya? saya sudah memakai font awesome gagal, gak muncul . mungkin salah kodenya hmmm.
tolongin kang. thanks

Gho Far mengatakan...

Maknyus... :2thumbup