Kcaturdev - Setiap blogger pasti ingin tampilan blognya terlihat menarik tetapi tetap menjaga kenyamanan pengunjung dan tidak memberatkan loading blog, di kesempatan kali ini saya akan membagikan sebuah Widget
Recent Comment yang keten untuk blog kamu.
Jangan khawatir jika widget
Recent Comment yang saya bagikan ini memberatkan loading blog kamu karena widget ini tidak membarati loading blog kamu dan tentunya tampilannya yang elegan, nah langsung saja kita ke widgetnya.
1. Buka Dashboard Blogger >> Lalu pilih menu Tata Letak
2. Tambahkan Gadget >> Pilih HTML/Javascript
3. Lalu Masukan Kode di Bawah ini :
<style type="text/css"> #blogger-item-widget-recent-comment .avatar { width: 28px; height: 28px; float: left; padding: 3px; border: 1px solid #CCC; margin: 3px 5px 0 0; -webkit-border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ -moz-border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ } #blogger-item-widget-recent-comment .avatar img { min-width: 28px!important; max-width: 28px!important; min-height: 28px!important; max-height: 28px!important; -webkit-border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ -moz-border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ border-radius: /*avatar-round-s*/4px;/*avatar-round-e*/ } #blogger-item-widget-recent-comment .avatar a { z-index: 100; display: block; position: relative; } #blogger-item-widget-recent-comment .content a { /* font-size: 12px;*/ } #blogger-item-widget-recent-comment .content span { color: #999; font-size: 12px; font-style: italic; padding: 0 0.3em; } #blogger-item-widget-recent-comment .item { margin: 10px 0; line-height:1.2em; border-bottom: 1px white solid; } #blogger-item-widget-recent-comment .item-0 { /*margin: 0;*/ } #blogger-item-widget-recent-comment .info { text-align: right; height:1.2em!important; overflow:hidden; line-height: 1em!important; background:red; } #blogger-item-widget-recent-comment .info a { font-weight: bold; font-size: 11px; color: #AAA; display:none; } #blogger-item-widget-recent-comment:hover .info a { display:inline!important; } </style>
<script type="text/JavaScript"> /*User setting*/ var Name_Number = 4; /*Jumlah Komentar*/ var Show_Comment_Snippet = true;/*Deskripsi Komentar*/ var Show_Comment_Post_Title = true;/*Judul Artikel yang Dikomentari*/ var Snippet_Len = 150;/*Panjang Deskripsi*/ var Hide_Copyright = true;/*Hide_Copyright*/ var Lang_on = 'pada';/*Lang_on*/ var Lang_said = 'berkomentar';/*Lang_said*/ var HOST = '';/*HOST*/ _s7MgV = ['undefined','blogger-item-widget-recent-comment','<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','thr$in-reply-to','/default/','/summary/','?alt=json-in-script','','gd$extendedProperty','blogger.itemClass','pid-','','<div id="','">','<div class="item item-',' ','','">','<div class="avatar">','<a href="','"><img src="','"/></a>','</div>','<div class="content">','<a href="','">','</a>','<span>','</span><a href="','">','</a>',' ...','<span>',':</span><p>','</p>','</div>','<div class="clear"></div>','</div>','<div class="clear"></div>','<div class="info"><a target="_blank" href="http://surochman.blogspot.com" title="Widget Info">Blogger Widget</a></div>','</div>','/p/','','/p/','.html','-',' ','&callback=_fZiA','','alternate','','&callback=_fZiA','/feeds/comments/summary?alt=json-in-script&max-results=','&callback=_fZiA'];if(typeof(_vAoY)==_s7MgV[0]){var _vAoY=false;}if(!_vAoY){_vAoY=true;var _vLkL=_s7MgV[1];function _fZlF(url){document.write(_s7MgV[2]+url+_s7MgV[3]);}function _fGrU(json){var _vVmI=new Object();var _vGdA=/<\S[^>]*>/g;_vVmI.id=json.feed.id.$t;key=_s7MgV[4];index=_vVmI.id.indexOf(key);_vVmI.id=_vVmI.id.substring(index+key.length);_vVmI.id=_vVmI.id.replace(_s7MgV[5],_s7MgV[6]);_vVmI.cate=new Array();if(_s7MgV[7] in json.feed){for(i=0;i<json.feed.category.length;i++){_vVmI.cate[i]=json.feed.category[i].term;}}_vVmI.title=_s7MgV[8];if(_s7MgV[9] in json.feed){_vVmI.title=json.feed.title.$t;}_vVmI.subtitle=_s7MgV[10];if(_s7MgV[11] in json.feed){_vVmI.subtitle=json.feed.subtitle.$t;}_vVmI.admin=new Object();_vVmI.admin.name=_s7MgV[12];_vVmI.admin.uri=_s7MgV[13];_vVmI.admin.avatar=_s7MgV[14];if(_s7MgV[15] in json.feed.author[0]){_vVmI.admin.name=json.feed.author[0].name.$t;}if(_s7MgV[16] in json.feed.author[0]){_vVmI.admin.uri=json.feed.author[0].uri.$t;}if(_s7MgV[17] in json.feed.author[0]){if(json.feed.author[0].gd$image.src!=_s7MgV[18]){_vVmI.admin.avatar=json.feed.author[0].gd$image.src;}}_vVmI.total_entry=Number(json.feed.openSearch$totalResults.$t);_vVmI.start_index=Number(json.feed.openSearch$startIndex.$t);_vVmI.item_per_page=Number(json.feed.openSearch$itemsPerPage.$t);_vVmI.entry_number=0;if(_s7MgV[19] in json.feed){_vVmI.entry_number=json.feed.entry.length;}_vVmI.entry=new Array();for(i=0;i<_vVmI.entry_number;i++){_vVmI.entry[i]=new Object();temp=new Object();entry=json.feed.entry[i];temp.id=entry.id.$t;key=_s7MgV[20];index=temp.id.indexOf(key);temp.id=temp.id.substring(index+key.length);temp.published=_s7MgV[21];if(_s7MgV[22] in entry){temp.published=entry.published.$t;}temp.cate=new Array();if(_s7MgV[23] in entry){for(j=0;j<entry.category.length;j++){temp.cate[j]=entry.category[j].term;}}temp.title=_s7MgV[24];if(_s7MgV[25] in entry){temp.title=entry.title.$t;}temp.content=_s7MgV[26];if(_s7MgV[27] in entry){temp.content=entry.content.$t;}temp.summary=_s7MgV[28];if(_s7MgV[29] in entry){temp.summary=entry.summary.$t;}if(temp.summary==_s7MgV[30]){temp.summary=temp.content.replace(_vGdA,_s7MgV[31]);}if(temp.content==_s7MgV[32]){temp.content=temp.summary;}temp.link=_s7MgV[33];temp.reply_label=_s7MgV[34];if(_s7MgV[35] in entry){for(j=0;j<entry.link.length;j++){if(entry.link[j].rel==_s7MgV[36]){temp.link=entry.link[j].href;}if(entry.link[j].rel==_s7MgV[37]){temp.reply_label=entry.link[j].title;}}}temp.author=new Object();temp.author.name=_s7MgV[38];temp.author.uri=_s7MgV[39];temp.author.avatar=_s7MgV[40];a0=entry.author[0];if(_s7MgV[41] in a0){temp.author.name=a0.name.$t;}if(_s7MgV[42] in a0){temp.author.uri=a0.uri.$t;}if(_s7MgV[43] in a0){if(a0.gd$image.src!=_s7MgV[44]){temp.author.avatar=a0.gd$image.src;}}temp.thumb=_s7MgV[45];if(_s7MgV[46] in entry){temp.thumb=entry.media$thumbnail.url;}temp.reply_number=0;if(_s7MgV[47] in entry){temp.reply_number=Number(entry.thr$total.$t);}temp.reply_label=temp.reply_label.replace(temp.reply_number+_s7MgV[48],_s7MgV[49]);temp.reply_to=_s7MgV[50];temp.reply_json=_s7MgV[51];temp.reply_title=_s7MgV[52];if(_s7MgV[53] in entry){temp.reply_to=entry[_s7MgV[54]].href;temp.reply_json=entry[_s7MgV[55]].source;temp.reply_json=temp.reply_json.replace(_s7MgV[56],_s7MgV[57]);temp.reply_json=temp.reply_json+_s7MgV[58];}temp.pid=_s7MgV[59];if(_s7MgV[60] in entry){for(j=0;j<entry.gd$extendedProperty.length;j++){if(entry.gd$extendedProperty[j].name==_s7MgV[61]){temp.pid=entry.gd$extendedProperty[j].value;}}}temp.pid=temp.pid.replace(_s7MgV[62],_s7MgV[63]);_vVmI.entry[i]=temp;}return _vVmI;}var _vAjW=null;function _fFwS(){if(_vAjW.entry.length>0){h=_s7MgV[64]+_vLkL+_s7MgV[65];for(i=0;i<_vAjW.entry.length;i++){h+=_s7MgV[66]+i+_s7MgV[67]+(((i+1)==_vAjW.entry.length)?'item-last':_s7MgV[68])+_s7MgV[69];h+=_s7MgV[70];h+=_s7MgV[71]+_vAjW.entry[i].link+_s7MgV[72]+_vAjW.entry[i].author.avatar+_s7MgV[73];h+=_s7MgV[74];h+=_s7MgV[75];h+=_s7MgV[76]+_vAjW.entry[i].link+_s7MgV[77]+_vAjW.entry[i].author.name+_s7MgV[78];if(Show_Comment_Post_Title){h+=_s7MgV[79]+Lang_on+_s7MgV[80]+_vAjW.entry[i].reply_to+_s7MgV[81]+_vAjW.entry[i].reply_title+_s7MgV[82];}if(Show_Comment_Snippet){if(_vAjW.entry[i].summary.length>Snippet_Len){_vAjW.entry[i].summary=_vAjW.entry[i].summary.substring(0,Snippet_Len)+_s7MgV[83];}h+=_s7MgV[84]+Lang_said+_s7MgV[85]+_vAjW.entry[i].summary+_s7MgV[86];}h+=_s7MgV[87];h+=_s7MgV[88];h+=_s7MgV[89];}h+=_s7MgV[90];if(!Hide_Copyright){h+=_s7MgV[91];}h+=_s7MgV[92];document.write(h);}}function _fZiA(json){if(_vAjW==null){_vAjW=_fGrU(json);if(!Show_Comment_Post_Title){_fFwS();return;}first=-1;for(i=0;i<_vAjW.entry_number;i++){if(_vAjW.entry[i].reply_to.indexOf(_s7MgV[93])==-1){if(first==-1){first=i;}}else{_vIcK=_s7MgV[94];key=_s7MgV[95];index=_vAjW.entry[i].reply_to.indexOf(key);_vIcK=_vAjW.entry[i].reply_to.substring(index+key.length);key=_s7MgV[96];index=_vIcK.indexOf(key);_vIcK=_vIcK.substring(0,index);for(j=0;j<10;j++){_vIcK=_vIcK.replace(_s7MgV[97],_s7MgV[98]);}Upper=_vIcK.substring(0,1);_vAjW.entry[i].reply_title=Upper.toUpperCase()+_vIcK.substring(1);}}if(first!=-1){_fZlF(_vAjW.entry[first].reply_json+_s7MgV[99]);}else{_fFwS();}}else{var _vIcK=json.entry.title.$t;var _vTfG=_s7MgV[100];for(i=0;i<json.entry.link.length;i++){if(json.entry.link[i].rel==_s7MgV[101]){_vTfG=json.entry.link[i].href;}}var _vUaK=-1;for(i=0;i<_vAjW.entry_number;i++){if(_vAjW.entry[i].reply_to==_vTfG){_vAjW.entry[i].reply_title=_vIcK;}else if(_vUaK==-1){if(_vAjW.entry[i].reply_title==_s7MgV[102]){_vUaK=i;}}}if(_vUaK!=-1){_fZlF(_vAjW.entry[_vUaK].reply_json+_s7MgV[103]);}else{_fFwS();}}}_fZlF(HOST+_s7MgV[104]+Name_Number+_s7MgV[105]);} </script>
4. Lalu Simpan dan Lihat Hasilnya
5. Selesai
Mungkin sekian Artikel saya Tentang
Cara Membuat Widget Recent Comment di Blog semoga bermanfaaf terimakasih.