Cara Membuat Widget Top Komentator pada Blog

byKurazone Net -Mei 18, 2018

KURAZONE ~ Widget yang satu ini biasanya digunakan untuk mengetahui siapa saja yang paling banyak berkomentar di blog kita. Gambaran atau penampakan dari widget yang saya bagikan ini kurang lebih akan nampak seperti gambar dibawah ini.

Contoh tampilan Top Komentator pada Template Dark

Langkah - langkah pembuatan

[1] Masuk ke Akun Blogger >> Pilih Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript, kemudian masukkan kode - kode dibawah ini :

Note : kode CSS dan Javascript nya dimasukkan kedalam 1 gadget/widget

<style type="text/css">
#bcd-Sota-widget-top-commentator .avatar {
 float: left;
 margin: 0 8px 0 0;
 display: block;
}
#bcd-Sota-widget-top-commentator .avatar img {
    min-width: 32px!important;
 max-width: 32px!important;
 min-height: 32px!important;
 max-height: 32px!important;
 -webkit-border-radius: /*avatar-round-s*/0px;/*avatar-round-e*/
 -moz-border-radius: /*avatar-round-s*/0px;/*avatar-round-e*/
 border-radius: /*avatar-round-s*/0px;/*avatar-round-e*/
}
#bcd-Sota-widget-top-commentator .avatar a {
    z-index: 100;
 display: block;
 position: relative;
}
#bcd-Sota-widget-top-commentator .content a {
    font-weight: bold;
}
#bcd-Sota-widget-top-commentator .content span {
    display: block;
    color: #999;
    font-size: 10px;
    font-style: italic;
}
#bcd-Sota-widget-top-commentator .item {
    margin: 10px 0;
}
#bcd-Sota-widget-top-commentator .item-0 {
    /*margin: 0;*/
}
#bcd-Sota-widget-top-commentator .info {
    text-align: right;
    height:1.2em!important;
    overflow:hidden;
    line-height: 1em!important;
}
#bcd-Sota-widget-top-commentator .info a {
    font-weight: bold;
    font-size: 11px;
    color: #AAA;;
}
#bcd-Sota-widget-top-commentator .item-last {
    margin: 10px 0 0 0;
}
#bcd-Sota-widget-top-commentator .order-number {
    font-size: 30px;
    color: #999;
    font-style: italic;
    float: left;
    margin: 0 10px 0 0;
}
#bcd-Sota-widget-top-commentator .order-wrap {
    margin: 0 0 15px 0;
}
</style>

<script type="text/JavaScript">
/*User setting*/
var _Sota_Day_Number = 300;/*_Sota_Day_Number*/
var _Sota_Name_Number = 5;/*_Sota_Name_Number*/
var _Sota_Lang_comments = 'komentar';/*_Sota_Lang_comments*/
var _Sota_Hide_Copyright_Link = true;/*_Sota_Hide_Copyright_Link*/
var _Sota_Show_Thumbnail = true;/*_Sota_Show_Thumbnail*/
var _Sota_Show_Order_Number = true;/*_Sota_Show_Order_Number*/
var _Sota_Exclude_Users = 'Hater names here';/*_Sota_Exclude_Users*/
var _Sota_Exclude_Uri = '';/*_Sota_Exclude_Uri*/
var host = '';/*host*/

_s7EaE = ['undefined','bcd-Sota-widget-top-commentator',',',',','<script type="text/JavaScript" src="','"><\/script>','blog-','.comments','','category','','title','','subtitle','Anonymous','','http://img1.blogblog.com/img/anon36.png','name','uri','gd$image','http://img1.blogblog.com/img/blank.gif','entry','post-','','published','category','','title','','content','','summary','','comments','link','alternate','replies','Anonymous','','http://img1.blogblog.com/img/anon36.png','name','uri','gd$image','http://img1.blogblog.com/img/blank.gif','','media$thumbnail','thr$total',' ','','','thr$in-reply-to','thr$in-reply-to','','gd$extendedProperty','blogger.itemClass','pid-','','-','-','<div id="','">','<div class="order-number">','.</div><div class="order-wrap">','<div class="item item-',' ','','">','<div class="avatar">      <a href="','" target="_blank"><img src="','"/></a>     </div>','<div class="content">      <a href="','" target="_blank">','</a>      <span>',' ','</span>     </div>     <div class="clear"></div>    </div>','</div>','<div class="clear"></div>','<div class="info"><a target="_blank" href="http://surochman.blogspot.com" title="Widget Info">BloggerWidget</a></div></div>','Anonymous','','/feeds/comments/summary?alt=json-in-script&max-results=200&start-index=','&callback=_fKlD','/feeds/comments/summary?alt=json-in-script&max-results=200&callback=_fKlD'];if(typeof(_vIsL)==_s7EaE[0]){var _vIsL=false;}if(!_vIsL){_vIsL=true;var _vRyL=_s7EaE[1];var _vWtJ=_Sota_Exclude_Users.split(_s7EaE[2]);var _vQvT=_Sota_Exclude_Uri.split(_s7EaE[3]);function _fMeZ(url){document.write(_s7EaE[4]+url+_s7EaE[5]);}function _fNhE(json){var _vWcG=new Object();_vWcG.id=json.feed.id.$t;key=_s7EaE[6];_vRcB=_vWcG.id.indexOf(key);_vWcG.id=_vWcG.id.substring(_vRcB+key.length);_vWcG.id=_vWcG.id.replace(_s7EaE[7],_s7EaE[8]);_vWcG.cate=new Array();if(_s7EaE[9] in json.feed){for(_vXaN=0;_vXaN<json.feed.category.length;_vXaN++){_vWcG.cate[_vXaN]=json.feed.category[_vXaN].term;}}_vWcG.title=_s7EaE[10];if(_s7EaE[11] in json.feed){_vWcG.title=json.feed.title.$t;}_vWcG.subtitle=_s7EaE[12];if(_s7EaE[13] in json.feed){_vWcG.subtitle=json.feed.subtitle.$t;}_vWcG.admin=new Object();_vWcG.admin.name=_s7EaE[14];_vWcG.admin.uri=_s7EaE[15];_vWcG.admin.avatar=_s7EaE[16];if(_s7EaE[17] in json.feed.author[0]){_vWcG.admin.name=json.feed.author[0].name.$t;}if(_s7EaE[18] in json.feed.author[0]){_vWcG.admin.uri=json.feed.author[0].uri.$t;}if(_s7EaE[19] in json.feed.author[0]){if(json.feed.author[0].gd$image.src!=_s7EaE[20]){_vWcG.admin.avatar=json.feed.author[0].gd$image.src;}}_vWcG.total_entry=Number(json.feed.openSearch$totalResults.$t);_vWcG.start_index=Number(json.feed.openSearch$startIndex.$t);_vWcG.item_per_page=Number(json.feed.openSearch$itemsPerPage.$t);_vWcG.entry_number=0;if(_s7EaE[21] in json.feed){_vWcG.entry_number=json.feed.entry.length;}_vWcG.entry=new Array();for(_vXaN=0;_vXaN<_vWcG.entry_number;_vXaN++){_vWcG.entry[_vXaN]=new Object();temp=new Object();entry=json.feed.entry[_vXaN];temp.id=entry.id.$t;key=_s7EaE[22];_vRcB=temp.id.indexOf(key);temp.id=temp.id.substring(_vRcB+key.length);temp.published=_s7EaE[23];if(_s7EaE[24] in entry){temp.published=entry.published.$t;}temp.cate=new Array();if(_s7EaE[25] in entry){for(j=0;j<entry.category.length;j++){temp.cate[j]=entry.category[j].term;}}temp.title=_s7EaE[26];if(_s7EaE[27] in entry){temp.title=entry.title.$t;}temp.content=_s7EaE[28];if(_s7EaE[29] in entry){temp.content=entry.content.$t;}temp.summary=_s7EaE[30];if(_s7EaE[31] in entry){temp.summary=entry.summary.$t;}temp.link=_s7EaE[32];temp.reply_label=_s7EaE[33];if(_s7EaE[34] in entry){for(j=0;j<entry.link.length;j++){if(entry.link[j].rel==_s7EaE[35]){temp.link=entry.link[j].href;}if(entry.link[j].rel==_s7EaE[36]){temp.reply_label=entry.link[j].title;}}}temp.author=new Object();temp.author.name=_s7EaE[37];temp.author.uri=_s7EaE[38];temp.author.avatar=_s7EaE[39];a0=entry.author[0];if(_s7EaE[40] in a0){temp.author.name=a0.name.$t;}if(_s7EaE[41] in a0){temp.author.uri=a0.uri.$t;}if(_s7EaE[42] in a0){if(a0.gd$image.src!=_s7EaE[43]){temp.author.avatar=a0.gd$image.src;}}temp.thumb=_s7EaE[44];if(_s7EaE[45] in entry){temp.thumb=entry.media$thumbnail.url;}temp.reply_number=0;if(_s7EaE[46] in entry){temp.reply_number=Number(entry.thr$total.$t);}temp.reply_label=temp.reply_label.replace(temp.reply_number+_s7EaE[47],_s7EaE[48]);temp.reply_to=_s7EaE[49];if(_s7EaE[50] in entry){temp.reply_to=entry[_s7EaE[51]].href;}temp.pid=_s7EaE[52];if(_s7EaE[53] in entry){for(j=0;j<entry.gd$extendedProperty.length;j++){if(entry.gd$extendedProperty[j].name==_s7EaE[54]){temp.pid=entry.gd$extendedProperty[j].value;}}}temp.pid=temp.pid.replace(_s7EaE[55],_s7EaE[56]);_vWcG.entry[_vXaN]=temp;}return _vWcG;}function _fNaQ(jshort1,jshort2){for(_vXaN=0;_vXaN<jshort2.entry_number;_vXaN++){jshort1.entry[_vXaN+jshort1.entry_number]=jshort2.entry[_vXaN];}jshort1.entry_number+=jshort2.entry_number;return jshort1;}function _fTrY(date1,date2){date1=date1.split(_s7EaE[57]);date2=date2.split(_s7EaE[58]);date1=parseInt((new Date(date1[0],date1[1]-1,date1[2].substring(0,2)).getTime())/1000);date2=parseInt((new Date(date2[0],date2[1]-1,date2[2].substring(0,2)).getTime())/1000);var _vCaZ=date1-date2;if(_vCaZ<0) _vCaZ=-_vCaZ;return Math.floor(_vCaZ/86400);}var _vBwK=null;var _vPtM=[];function _fZhQ(){if(_vPtM.length>0){h=_s7EaE[59]+_vRyL+_s7EaE[60];min=Math.min(_vPtM.length,_Sota_Name_Number);for(_vXaN=0;_vXaN<min;_vXaN++){if(_Sota_Show_Order_Number){h+=_s7EaE[61]+(_vXaN+1)+_s7EaE[62];}h+=_s7EaE[63]+_vXaN+_s7EaE[64]+(((_vXaN+1)==min)?'item-last':_s7EaE[65])+_s7EaE[66];if(_Sota_Show_Thumbnail){h+=_s7EaE[67]+_vPtM[_vXaN].uri+_s7EaE[68]+_vPtM[_vXaN].avatar+_s7EaE[69];}h+=_s7EaE[70]+_vPtM[_vXaN].uri+_s7EaE[71]+_vPtM[_vXaN].name+_s7EaE[72]+_vPtM[_vXaN].count+_s7EaE[73]+_Sota_Lang_comments+_s7EaE[74];if(_Sota_Show_Order_Number){h+=_s7EaE[75];}}h+=_s7EaE[76];if(!_Sota_Hide_Copyright_Link){h+=_s7EaE[77];}document.write(h);}}function _fTmI(){Day0=_vBwK.entry[0].published;var _vRcB=0;admin=_vBwK.admin;for(_vXaN=0;_vXaN<_vBwK.entry_number;_vXaN++){author=_vBwK.entry[_vXaN].author;for(j=0;j<_vRcB;j++){if((_vPtM[j].name==author.name)&&(_vPtM[j].uri==author.uri)&&(_vPtM[j].avatar==author.avatar)){break;}}if(j<_vRcB){_vPtM[j].count++;}else{var _vHmR=true;if(_vWtJ.length){for(var _vLgR=0;_vLgR<_vWtJ.length;_vLgR++){if(_vWtJ[_vLgR]==author.name){_vHmR=false;break;}}}if(_vQvT.length){for(var _vLgR=0;_vLgR<_vQvT.length;_vLgR++){if(_vQvT[_vLgR]==author.uri){_vHmR=false;break;}}}if(_vHmR&&(admin.name!=author.name)&&(admin.uri!=author.uri)&&(admin.avatar!=author.avatar)&&(author.name!=_s7EaE[78])&&(author.uri!=_s7EaE[79])){_vPtM[_vRcB]=new Object;_vPtM[_vRcB].name=_vBwK.entry[_vXaN].author.name;_vPtM[_vRcB].uri=_vBwK.entry[_vXaN].author.uri;_vPtM[_vRcB].avatar=_vBwK.entry[_vXaN].author.avatar;_vPtM[_vRcB].count=1;_vRcB++;continue;}}day=_vBwK.entry[_vXaN].published;_vCaZ=_fTrY(Day0,day);if(_vCaZ>=_Sota_Day_Number) break;}for(_vXaN=0;_vXaN<_vRcB-1;_vXaN++){for(j=_vXaN+1;j<_vRcB;j++){if(_vPtM[_vXaN].count<_vPtM[j].count){temp=_vPtM[_vXaN];_vPtM[_vXaN]=_vPtM[j];_vPtM[j]=temp;}}}_fZhQ();}function _fKlD(json){if(_vBwK==null){_vBwK=_fNhE(json);}else{_vWcG=_fNhE(json);_vBwK=_fNaQ(_vBwK,_vWcG);}Day0=_vBwK.entry[0].published;for(var _vXaN=0;_vXaN<_vBwK.entry_number;_vXaN++){day=_vBwK.entry[_vXaN].published;_vCaZ=_fTrY(Day0,day);if(_vCaZ>=_Sota_Day_Number) break;}if(_vXaN==_vBwK.entry_number&&_vBwK.entry_number<_vBwK.total_entry){_fMeZ(host+_s7EaE[80]+(_vBwK.entry_number+1)+_s7EaE[81]);return;}_fTmI();}_fMeZ(host+_s7EaE[82]);}
</script>

[2] SIMPAN, kemudian lihat hasilnya
[3] Selesai

Note :

Silahkan ganti tulisan yang ditandai warna kuning dan setting sesuai keinginan.
Jika ingin mengubah bentuk lengkungan pada avatar, ubah border-radius nya antara 0px hingga 100px (semakin tinggi pixel nya semakin melingkar bentuk lengkungan [max 100px])
Ubah ke true atau false pada setting var_ nya sesuai keinginan

Fitur :

Tidak diperlukan jQuery pada script ini
Tidak menampilkan komentar yang berasal dari admin,guest dan anonim
Tersedia URL Profile dari Komentator
Banyak beberapa style yang bisa dipakai
Tampilan widget akan menyesuaikan template kalian
Cocok diletakkan pada bagian sidebar
Loading cepat

Dengan adanya widget semacam ini kita menjadi tahu siapa saja para komentator yang aktif memberikan komentarnya di blog kita, sekaligus memberikan kesan yang profesional bagi blog kita.

Itulah ulasan mengenai "Cara Membuat Widget Top Komentator pada Blog", Selamat mencoba dan semoga bermanfaat. Goodluck!!

Jangan lupa untuk meninggalkan komentar dan share ke teman - teman kalian ya...😎😊😘..

Demo : Bisa melihat Top Komentator dibawah ini : (hasil akhir atau tampilannya relatif / akan menyesuaikan dengan tema Blog yang kalian gunakan)

Top Komentator

Cara Membuat Widget Top Komentator pada Blog

Langkah - langkah pembuatan

Top Komentator

10 Manfaat Rutin Minum Air Putih 8 Gelas Setiap Hari

Lirik Nasyid Huruful Hijaa/Hijaiyyah (Arab, Latin dan Terjemahan Indonesia)

Rekomendasi Artikel

Lirik Nasyid Huruful Hijaa/Hijaiyyah (Arab, Latin dan Terjemahan Indonesia)

Lirik Sholawat / Teks Nadhom Kitab Aqidatul Awam (Arab, Latin dan Terjemahannya)

Cara Menonton Avatar: The Legend of Aang Dubbing Indonesia secara Gratis

Cara Import Akun Trust Wallet ke Metamask Menggunakan 12 Phrase Words

Cara Embed atau Menampilkan Halaman Koleksi Produk Affiliasi Shopee (My Collection) di Website/Blog

Lirik / Teks Sholawat Nurul Huda Wafana (Arab, Latin dan Terjemahan Indonesia) Versi Fitriana Karmila

Lirik Lagu Sholawat Ya Barqosami (يَابَرْقَ الشَّامِ) Versi Nazwa Maulidia

Label

Partner

Series Anime Terbaru

Anime Batch Terbaru

Drama Terbaru

Sticker LINE untuk WA Terbaru

Series Tokusatsu Terbaru

Tokusatsu Batch Terbaru

Movie/Film Terbaru

Tips Bermain Tour of Neverland

Formulir Kontak