✔ Cara Menciptakan Widget Top Komentator Di Blog

Kembali akan aku bagikan tips blogspot, kali ini cara menciptakan widget top komentator di blog. Widget ini akan memperlihatkan siapa saja yang paling banyak memperlihatkan 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 dapat melihat siapa saja pengunjung blog yang aktif berkomentar dalam kurun waktu tertentu.

Cara Membuat Widget Top Komentator di Blog

Untuk menciptakan widget top komentator di blogspot/blogger, kita akan memakai CSS dan Javascript. Untuk langkah-langkahnya sebagai berikut:

1. Masuk ke dashboard blog.
2. Pilih Tema dan klik Edit HTML.
3. Letakkan arahan berikut sempurna di atas arahan ]]></b:skin>.

#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/AVvXsEjJJ3JD70wSasGMGK4NbHXdSoEeX4sU786mmGXlgdpbAxOTg-UG1RhzRCoO3JmHc2biLNMRDEc_XsTogm0F5jzx8V-CnJn0vy1JGFZsseoEhxUrwbOU-j0lPsEOGhB9GLYGBoo4kk4LRArJ/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/AVvXsEgfHvGq3HCVUJPY9PfsI3YSFmYjVzd5cbcopnBq9Bn13cUcFTMSBuIaQdgb6FRR7PYcBcoHLV1_nhoo_UjHOEk0xYeNivfpgcCMc3neS6fmOggLwKlekZrrKRxwkhfoxBMpBJWxGmhqkgq1/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/AVvXsEgYx4iBXJHXJPhTeqhKt64eBBQ8oJULFgQjJV3FHB9zEr1SyzefduA3YvMtzn2KQccyQ-NuN8q3i0hSNHM3nGJA_20LKAL8Ag6g_AL5XdQiyiSNEONb5EXHWxR5-mv1mFvyb1Y5H0bxbx5F/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/AVvXsEhmIM1sJ18u4II4wStHUWXKjCOysR_3OFbvYf_JI1AHgrKWaBtRMMkXOW2bxtXRcIu2RZQ7wLY8KTq0UJsBq7CwMORvroYdPDYivYFyYMCH2Rr8tMeILlSm0RNzThi9QYGNKY7178nH6Rra/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/AVvXsEg_x9R19doBNWnA6KQxxdnopg_7-zheQbiyi_G9Vssc-3V2gtShbbVhPZbaOSS83Ziy6siu-KtqQ3IL88mwMDiEjIEFiwqj_cNVxyE3fWloUmbyeLvfGkx3RIZnQe_e_ZSIS1tmFGpuq840/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 sajian Tata Letak.
2. Klik Tambah Gadget, lalu pilih HTML/Javascript.
3. Masukkan arahan j4vascript di bawah ini:

<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="✔ Cara Membuat Widget Top Komentator di Blog">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 membuktikan acara blog yang sangat baik, orang dapat melihat bagaimana blog Anda berinteraksi dengan pengunjung yang membuktikan komunikasi baik pengguna dan pemilik blog.

Jika ada pertanyaan seputar postingan ini, silahkan tuliskan pada kolom komentar di bawah. Selamat mencoba.
Sumber http://www.randi.id

Share this post

Berlangganan update artikel terbaru via email: