Cara Membuat Widget Top Komentator di Blog

Membuat Top Komentator Blog
Kembali akan saya bagikan tips blogspot, kali ini cara membuat widget top komentator di blog. Widget ini akan menunjukkan siapa saja yang paling banyak memberikan komentar pada blog Anda.

Daftar pengunjung yang paling banyak berkomentar pada blog akan ditampilkan secara statisktik dalam waktu 1 bulan atau 30 hari (bisa disesuaikan).

Dengan memasang widget top komentator pada blog, anda bisa melihat siapa saja pengunjung blog yang aktif berkomentar dalam kurun waktu tertentu.


Cara Membuat Widget Top Komentator di Blog

Untuk membuat widget top komentator di blogspot/blogger, kita akan menggunakan CSS dan Javascript. Untuk langkah-langkahnya sebagai berikut:
  1. Masuk ke dashboard blog.
  2. Pilih Tema dan klik Edit HTML.
  3. Letakkan kode berikut tepat di atas kode ]]></b:skin>.
    4. #randi-dotid-widget-top-komentator .avatar{float:left;margin:0 8px 0 0;display:block;position:absolute;left:24px;bottom:-12px} #randi-dotid-widget-top-komentator .avatar img{width:15px;height:15px;border:2px solid white;border-radius:100%} #randi-dotid-widget-top-komentator .avatar a{pointer-events:none} #randi-dotid-widget-top-komentator .content a{pointer-events:none;font-weight:500} #randi-dotid-widget-top-komentator .content span{display:block;color:#777;font-size:12px} #randi-dotid-widget-top-komentator .item{margin:0 0 20px;padding:0 0 0 50px;position:relative} #randi-dotid-widget-top-komentator .item-0{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbRTu2R8Ib9unDvvaoztfWHsq9HQeSyvikcKT3iWY84vTmCS5AI_0Seo6ckjZioM9Sx_v9zyoxz1t6Tgaq0ZrufCuEqDucan1RzmD5g6mCC8rPyPPwX8XfwlaWsPYBoOrhvEDyT3v4-qX/s1600/TOP-1-komentators-----------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%} #randi-dotid-widget-top-komentator .item-1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWuto_Kv0RJRl8A9LxOjEdNN9EIseGfz2UHM8JKHMpPA2o8wBSGDGQfLXTuH-KKla2UKQiPn84rsxJmzCO07mm7yVwRoA8YNuuQlA6xq2QDl2KXaAkBbH_OaJ5X13n7Mk7js3397mGpC6p/s1600/TOP2-komentators--------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%} #randi-dotid-widget-top-komentator .item-2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZN2Pjws1Xta65dTm8BDwcu_KvlI2kx7KRhe0ymlB2f-FTDluOl0VXvVylBEtYMp-a9TsFH4tnmaomeKL4i5hjrB-Y-87HzqLfH0usAcqsEShRxQK3UACyPrTZkgb3knsp0lUXEzJkn16o/s1600/TOP-3-komentators------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%} #randi-dotid-widget-top-komentator .item-3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4yTQtlhCsSL8oAZ3Wy0DYVyyOx83KrYroeLG532cQVlCIRmFhIWAABP-pYlxHNUL0EPqyFNiYiLXihvzrPUmhziL1RLS9XEMzOrC33i8O94d7-h_pMg4vB8xBoYfigl-7R3AqlR6ugRQy/s1600/TOP-4-komentators------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%} #randi-dotid-widget-top-komentator .item-4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXCnxMksEQkMdSgZ_Zx0lHHSJlUPF8uOK1SapLa1rJ6s4Qjgf4g908v3UkBokbTyGd998UskTxWqT03J6A9KIVTrHet2wLgA57TKnQGQbGnm7l7sso2JbG2ojhYjIE6rKDJ9bdVqMfUTGR/s1600/TOP-5-komentators------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%} #randi-dotid-widget-top-komentator .item-last{margin:10px 0 0 0} #randi-dotid-widget-top-komentator .order-number{display:none;font-size:18px;color:#fff;float:left;margin:0 10px 0 0;background:#ff6262;padding:6px 10px;border-radius:4px;font-weight:300} #randi-dotid-widget-top-komentator .order-wrap{margin:0 0 15px 0}
  4. Simpan Tema.


Selanjutnya, buatlah Widget HTML/Javascript dengan cara sebagai berikut:
  1. Masuk ke menu Tata Letak.
  2. Klik Tambah Gadget, kemudian pilih HTML/Javascript.
  3. Masukkan kode javascript di bawah ini:
    4. <script type="text/JavaScript"> var _dotid_Day_Number = 30; var _dotid_Name_Number = 5; var _dotid_Lang_comments = 'komentar'; var _dotid_Hide_Copyright_Link = true; var _dotid_Show_Thumbnail = true; var _dotid_Show_Order_Number = false; var _dotid_Exclude_Users = 'Randi Iskandar'; var _dotid_Exclude_Uri = ''; var host = '';/*host*/ //randi.id _s7EaE = ['undefined','randi-dotid-widget-top-komentator',',',',','<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="https://www.randi.id" title="Widget Info">BSW</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=_dotid_Exclude_Users.split(_s7EaE[2]);var _vQvT=_dotid_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,_dotid_Name_Number);for(_vXaN=0;_vXaN<min;_vXaN++){if(_dotid_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(_dotid_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]+_dotid_Lang_comments+_s7EaE[74];if(_dotid_Show_Order_Number){h+=_s7EaE[75];}}h+=_s7EaE[76];if(!_dotid_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>=_dotid_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>=_dotid_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]);}//randi.id </script>
  4. Simpan.

Keterangan:
  • Day_Number = 30; : jumlah hari.
  • Name_Number = 5; : jumlah komentator yang ditampilkan.
  • Exclude_Users = 'Randi Iskandar'; : nama pengguna yang jangan ditampilkan (nama Anda)
  • Ganti https://www.randi.id dengan nama blog Anda.

Silahkan lihat hasilnya.

Menampilkan top komentator blog menunjukan aktivitas blog yang sangat baik, orang bisa melihat bagaimana blog Anda berinteraksi dengan pengunjung yang menunjukan komunikasi baik pengguna dan pemilik blog.

Jika ada pertanyaan seputar postingan ini, silahkan tuliskan pada kolom komentar di bawah. Selamat mencoba.
Postingan terkait
Komentar