Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog

22:03:00
Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog
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,
Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog


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 = "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>



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,

Cara Membuat Top Komentator Pada Halaman Statis Dan Komentar Blog



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/

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

10 Comments

Fiqri Alfianto 31 December 2014 at 05:57

wah ctrl+d dulu dah :D jgn lupa mampir yoo :D

Renaldy Ramadani 31 December 2014 at 12:16

ok gan, :v silakan di coba gan :v

manfaat bersama 31 December 2014 at 12:42

Wah keren nih..jadi ketahuan top komentarnya pake widget ini..ijin nyoba gan


salam satriyoku.blog

Renaldy Ramadani 31 December 2014 at 12:46

iya gan :v :v

Saipul Muiz 2 February 2015 at 15:01

Gan Saya Sudah pasang top komentator di blog saya tapi kenapa kok tidak muncul..

silahkan cek :http://muiztech.blogspot.com/p/top-komentator.html

Renaldy Ramadani 3 February 2015 at 13:57

Saya juga bingung gan, kok gak muncul di blog ente, mungkin templatenya nggak support :bingung

opick weblog 9 March 2015 at 08:31

mau nanya gan, biar button top komentator muncul juga di notifikasi komentar caranya gimana ya?

Renaldy Ramadani 9 March 2015 at 11:56

Terapkan dahulu tombol 3d kang rian, http://renaldyways.blogspot.com/2014/12/cara-membuat-tombol-3d-keren-seperti.html , setelah itu jika belum mempunya notifikasi komentar silakan terapkan di blog anda dahulu http://renaldyways.blogspot.com/2014/10/cara-membuat-tombol-notifikasi-komentar.html , setelah itu paste script di bawah ini tepat dibawah <div id='cm-wrapper'>

<center><a class='tombol' href='http://renaldyways.blogspot.com/p/top-komentator.html'>Lihat 10 Top Komentator <i class='fa fa-chevron-circle-right'/></a></center>

opick weblog 11 March 2015 at 07:50

makasih banyak gan. dua jempol deh buat agan :2thumbup

Renaldy Ramadani 11 March 2015 at 11:26

:samasama sama sama gan