Cara Membuat Widget Top Komentator pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Widget Top Komentator pada Blog

Pilihan Editor :

Cara Membuat Widget Top Komentator pada Blog
Penulis Bagus Surochman
0
Modus malam



Cara Membuat Widget Top Komentator pada Blog

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.

Cara Membuat Widget Top Komentator pada Blog
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

nanio
Cara Membuat Widget Top Komentator pada Blog
Cara Membuat Widget Top Komentator pada Blog Cara Membuat Widget Top Komentator pada Blog Reviewed by Bagus Surochman on 5/18/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.