Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog
Top Komentator
Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat top komentator pada halaman statis dan komentar blog, nah untuk menerapkannya silakan Anda mengikuti beberapa langkah berikut;
Langkah
1. Login pada blog Anda masing-masing,
2. Pada menu dashboard pilih menu laman,
3. Lalu pilih menu laman baru,
4. Jangan lupa untuk mengganti jenisnya dari compose menjadi html,
5. Copy script di bawah ini, lalu paste pada laman 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"></link>
<br />
<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", "Renaldy Ramadani"];
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/AVvXsEiHhlG7_udndnPm9MMal51Jmz2OGR754XF9z-R_5BKP1J0o0HSx1E1eXZqaN591LQsXu62uFBeLKZPQNep5bosH1Jqr7xNa_zBtiZm-hwjLia1MukdhyphenhyphenYYQDH3aie8OvAytl5IQ-SVLr9Q/" + 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>Jangan lupa untuk ganti nama Saya menjadi nama Anda!
6. Lalu simpan,
7. Setelah itu untuk membuat top komentator pada komentar blog, kembali pada menu dashboard pilih menu template,
8. Lalu pilih menu edit html,
9. Setelah itu jika Anda belum mempunyai script Jquery maka Anda harus menambahkannya, tetepi jika Anda sudah mempunyainya tidak perlu ditambah karena membuat tidak berjalan dengan baik, untuk pemasangannya cari kode </head> dengan cara
Ctrl
+F
, lalu paste tepat di atas kode </head>, <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> 10. Setelah itu copy script di bawah ini, lalu cari kode </body> dengan cara
Ctrl
+F
, setelah itu paste tepat di atas kode </body>, <script>
//<![CDATA[
var gentosnami = document.getElementById("area");
gentosnami.innerHTML = (gentosnami.innerHTML).replace(/Renaldy Ramadani/gi, "Renaldy Ramadani <a class='tombol kecil'>Top Komentator</a>");
//]]>
</script> Ganti nama Saya dengan nama top komentator blog Anda, jadi jumlah script yang dipasang di atas kode </body> bisa lebih dari 1 sesuai banyaknya top komentator Anda!
Jika Anda menggunakan kolom komentar biasa ganti teks pada script area menjadi comment-holder, jika Anda menggunakan threaded comment maka teks pada script area biarkan saja atau jika tidak muncul bisa diganti dengan comment_body.
11. Untuk membuat tombol top komentator pada kolom komentar, copy script berikut ini,
.tombol { display: inline-block; text-decoration: none; outline: 0; cursor: pointer; font: 700 12px/1em HelveticaNeue,Arial,sans-serif; padding: 8px 11px; color: #555; text-shadow: 0 1px 0 #fff; background: #f5f5f5; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#f0f0f0)); background: -moz-linear-gradient(top,#f9f9f9,#f0f0f0); border: 1px solid #dedede; border-color: #dedede #d8d8d8 #d3d3d3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #eaeaea,inset 0 1px 0 #fbfbfb; } .tombol:focus,.tombol:hover { color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#e9e9e9)); background: -moz-linear-gradient(top,#f9f9f9,#e9e9e9); border-color: #ccc; -webkit-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; -moz-box-shadow: 0 2px 1px #e0e0e0,inset 0 1px 0 #fbfbfb; box-shadow: 0 1px 2px #e0e0e0,inset 0 1px 0 #fbfbfb; } .tombol:active { position: relative; top: 1px; color: #555; background: #efefef; background: -webkit-gradient(linear,left top,left bottom,from(#eaeaea),to(#f4f4f4)); background: -moz-linear-gradient(top,#eaeaea,#f4f4f4); border-color: #c6c6c6; -webkit-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; -moz-box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; box-shadow: 0 1px 0 #fff,inset 0 0 5px #ddd; } .tombol.bulat { padding: 8px 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } button.tombol,input.tombol { *width: auto; *overflow: visible; } .tombol img { border: none; vertical-align: bottom; } .tombol.kecil { padding: 5px 11px; font-size: 11px; font-weight: 400; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .tombol.kecil.bulat { -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; } .tombol.besar { padding: 12px 15px; font-size: 20px; font-weight: 400; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .tombol.besar.bulat { padding: 12px 22px; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px } 12. Lalu cari kode ]]></b:skin> dengan cara
Ctrl
+F
, lalu paste tepat di atas kode ]]></b:skin>,13. Simpan dan lihat hasilnya.
Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.
Referensi script http://blog.kangrian.com/