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...

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, 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 :
Tutorial Blogger dan Widget Blogger

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

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", "Paja Tapuih"];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 Paja Tapuih 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 Paja Tapuih! ^_^ , semoga bermanfaat.

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

Salam Blogger, A.K.A ` Paja Tapuih

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,36,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Blog iTapuih.com: Membuat Top Komentator pada Halaman Statis dan Komentar Blog
Membuat Top Komentator pada Halaman Statis dan Komentar Blog
https://4.bp.blogspot.com/-8pyyAQ-dEvA/Wkp7xIxaQaI/AAAAAAAANi0/nj_JIqmepnMsegvW3xh4kQegB0rJuH5eACLcBGAs/s1600/Widget-Blog.png
https://4.bp.blogspot.com/-8pyyAQ-dEvA/Wkp7xIxaQaI/AAAAAAAANi0/nj_JIqmepnMsegvW3xh4kQegB0rJuH5eACLcBGAs/s72-c/Widget-Blog.png
Blog iTapuih.com
https://blog.itapuih.com/2019/01/membuat-top-komentator-pada-halaman.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2019/01/membuat-top-komentator-pada-halaman.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy