Recent Comments widget dengan Avatar untuk Blogger / Blogspot. Dengan hadirnya fitur baru yaitu Threaded Comments, Blogger pun mengubah Comments API yang memungkinkan menampilkan avatar pada widget Recent Comments / Komentar Terakhir.

Script untuk menampilkan avatar pada komentar terakhir atau recent comment, dibuat oleh Harish. Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat Komentar Sahabat di blog ini.

avatar

Cara menampilkan Avatar pada Reccent Comments Blogger

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-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:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;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  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwa.js"></script>
<script type="text/javascript" src="http://blog.kangismet.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :

numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true,
avatarSize  = 30, (ukuran avatar dalam pixel)
roundAvatar = true,
characters  = 30, (jumlah karakter yang ditampilkan)
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;

4. Ganti blog.kangismet.net dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang 
    ditampilkan.
5. Simpan.

Semoga tutorial cara menampilkan avatar pada recent comments blogger ini bisa membantu mempercantik blog anda. smile

86 komentar

Terima kasih tutorialnya, sangat membantu... :-bd

Balas

udah dipasang keren hasilnya :-bd

Balas

:-B kode script nya lumayan simpel sih.. tp bagus juga :D

Balas

sayangnya widget ini bukan favoritku, biar ga makin berat aku hapus deh dari blog

Balas

http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif

Balas

Syukur banget gan.. akhirnya saya bisa juga udah nyoba, boleh di liat

thanks gan

Balas

sudah dikunjungi gan... :)

Balas

tutorial blog disini sgt bermanfaat kang :D oya, sudah saya pollow juga ;)) kalo berkenan follback :-bd

Balas

terimakasih... :) n sudah di follback

Balas

Mantef banget nih kangg...izin aku sedot ya kanggg..

Balas

Pengunjung Setia kang » Terima kasih kang Informasi ini, tampilannya sangat menarik dan simple. Cocok untuk blog yang suka widget menarik. :x

Balas

waduh baru nih widgetnya thanks ya kang

Balas

kirain siapa Kilua :) si akang geuning

Balas

Bagus sepertinya widget recent commentnya bang, cma bikin load blog terasa berat g ya ??

Balas

wahhh, kang ismet ! good, nice post bang ! wah kayaknya saya bakal betah nongkrong di blog ini ! blog saya jdi tmbah cantik :) hehe
mksih ya bang ! 100 jempol deh (y)

follback blog saya bang ! blog abang sdah sya follow :)

Balas

ini dia yg saya cari..
habis baca tutorial di Blogger Tune-Up
gak ngerti juga..
akhirnya dapat di blog Kang Ismet, lebih simple dan dinamis..

visit back broo.. :D

Balas

Ok sip bro... udah di kunjungi blognya :)

Balas

terima kasih infonya mas, sudah saya pasang di blog saya dan hasilnya memang bagus

Balas

maaf mas, kok di blog saya gak bs tampil ya?

mohon bantuannya, mas.

Balas

Ccek lagi... feednya yang bawah sudah di rubah belum?

Balas

wow keren.. btw ini integrasi dg Gravatar kayak di WP atau script terpisah kang??

Balas

Belum sob, belum terintegrasi dengan Gravatar. Ini menggunakan Json script...

Balas

OO, ternyata aku yg ketipu sob, soalnya liat URL gravatar di scriptnya hehe. btw punya tips ampuh buat ngurangi berat blog g sob? blogku dari segi tampilan sangat minim trus widgetnya jg seadanya tapi kenapa kata teman2 loadingnya berat.. mohon pencerahannya :))

Balas

Ngga terlalu berat juga sih... tapi yang bikin lama kayaknya script dari addjugler..

Balas

Mas..mau nanya nich..
Gimana sich kl seandainya dikomentar itu juga ditampilkan link yang dikomentari supaya nggak ribet buat yang udah dibalas komentarnya..

Makasih..KEEP POSTING

Balas

Izin nyoba Kang ,,,
cantik loh recent comment nya ,,

wilujeng ngeblog

Balas

Join to my blog please http://boyedittingcrew.blogspot.com/

Balas

kalo buat komentar admin nggak kelihatan gimana kang ????

Balas

wah musti dicoba ni...
langsung ke TKP aja ea sob..

Balas

mas saya ga tampuil mas... udah sesuai dengan petunjuk

Balas

sudah bisa gan, thanks.. ternyata pengaturan site feednya harus full
http://ubuntu-roy.blogspot.com/

Balas

tks u friend
http://frlangue.blogspot.com

Balas

Makasih banyak atas sharenya, blog saya jadi kian menarik. bekerja sempurna scriptnya bos...

Salam blogging.

Balas

makasih kang, jadi lebih keren kalo pasnag ginian hehe salam kenal aja

Balas

mampir gan,ijin copy script untuk recent comment ya,terimakasih

Balas

tolong diperbaiki, recent commentnya gak berfungsi, kayaknya hosting jsnya yg bermasalah thanks

Balas

Sudah diperbaiki, silahkan dicoba lagi.. Thanks infonya

Balas

kang, boleh minta tutorial cara bikin widget yg ngikut terus saat kursor digerakkan kebawah gak? apa memang sudah diposting, say anyari2 di gugel gak pernah nemu
(kayak widget share dan g+/facebook page di didebar kanan blog ini)
makasih kang

Balas

Heheh... sudah di posting sob cek disini :
http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Balas

terima kasih kang atas bantuannya.... sekarang blog sy sdh jalan seperti apa yg sy inginkan

sekali lagi thx alot

Balas

sama2 sob.. semoga sukses BO nya :)

Balas

adminnya kok juga ngikut ya kang o.O

Balas

mantafb gan posting-nya...
ijin tes n pasang gan...

Balas

Keren nih widget nya, kebetulan saya sudah pakai widget yang seperti ini! Thanks for share.. :) | NICE BLOG!

Balas

recent commentnya jadi mantep, skrip google codenya bekerja dengan baik sekali, thanks ya Kang Ismet

Balas

Sangat bermanfaat buat saya ,
terima kasih bang ismet

Balas

boleh nih idenya

Balas

infonya bermanfaat sekali mass :D
Seteleh mengikuti saran yang ada di blog ini, alhamdulillah pengunjung saya naik meskipun kurang dari 50/hari.

Terima Kasih Kang

Balas

sangat bemanfaat, ijin nyedot :)

Balas

gila,, keren banget pake avatar

Balas

Terima kasih ya Bos infonya :) sangat membantu ....benar2 toppp

Balas

super sekali kang ismet , matur nuhun tutorialnya

Balas

Terimakasih banyak atas Informasinya

Balas

kang, caranya loading blog kyak punya kang ismet gmn

Balas

Simpan ini di atas ]]></b:skin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#fff url('http://1.bp.blogspot.com/-hwDGciedSOI/UYU_0DrMLsI/AAAAAAAAEBg/90Wn6WrO2mY/s1600/loadinfo.net+(6).gif') no-repeat 50% 50%;
font:0/0 a;
text-shadow:none;
padding:1em 1.2em;
display:none;
}

terus simpan kode ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Balas

comments widget should be awesome like yours because it helps in building relationship with readers and engaging conversation ,many of the top bloggers like you have written about it and also give importance to it.thanks for sharing.comments widget for blogger

Balas

Kang Ismet, Blog punya aku pingin page-loader nya kaya punya Kang Ismed ini juga, Tapi nggak bisa yang kang, Tolong dong.

Salam kenal Marlon Alamo

Balas

kan udah ada di atas :)

Balas

kang kalo ngilangin komentar adminya gimana yah ;)

Balas

pake nya tutorial yang ini http://blog.kangismet.net/2012/05/menyembunyikan-komentar-admin-pada.html

Balas

berhasil kang makasih ^_^

Balas

hello kangismet, ane pake cara ini kok gak tampil ya? apa ada yang salah dengan template yang ane gunakan?

Balas

Coba pake cara diatas, liat komen Dhea Mohamad

Balas

bukan ngilangin komentar admin-nya gan,, tapi recent commentsnya gak muncul sama sekali,, padahal feed sudah benar

Balas

alhamdulillah tos ka anggo kang. hatur nuhun tutorialna. :D
tiasa di cek kang di lapak saya, heheh. http://skumfukdesign.blogspot.com/
selamat sahur. :)

Balas

Kang Ismet Di blog saya kok, recent komenya nggak tayang ya, bisa di check di pram-software.com, Solusinya gimana kang,

Terimakasih

Balas

coba pake yang terbaru :

Selengkapnya : [url=http://blog.kangismet.net/2013/09/recent-comment-dengan-avatar-untuk-blogger-v3.html]Recent Comment dengan Avatar V.3[/url]

Balas

terima kasih infonya kang follow putri ya

Balas

kang , mau nanya ni . . . bagaimana membuat recent comment di blog . . . .komentar admin tidak terlihat

terima kasih infonya

Balas

Nyimak Lagi Kang Ismet, saya di artikel yang nice ini

Balas
Komentar ini telah dihapus oleh pengarang.

Thanks infonya gan...mohon kunjungannya, butuh saran untuk kemajuan blog
saya pasang disini http://edutoddler.blogspot.com/

Balas

pertamax gan :D

http://saidblogmaster.blogspot.com

Balas

udh dipajang
makasih info'y ;)

Balas

http://www.fnur.bu.edu.eg/
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/422-2013-12-10-10-18-01
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/421-2013-12-10-09-48-39
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/419-2013-12-09-07-21-12
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/420-2013-12-10-09-48-38
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/417-2013
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/418-2013-12-09-07-17-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/415-2013-12-03-08-09-23
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/416-2013-12-03-08-25-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/413-2013-11-21-07-50-21
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/414-2013-11-25-09-38-30
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/411-2013-11-20-08-11-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/412-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/409-2013-2014
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/410-2013-11-13-17-25-28
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/407-2013-11-09-08-51-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/408-2013-11-13-11-55-53
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/405-2013-11-09-08-42-05
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/406-2013-11-09-08-46-10
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/403-2013-11-09-08-25-45
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/404-2013-11-09-08-28-15
http://www.fnur.bu.edu.eg/fnur/index.php/main-news/item/400-2013-11-09-07-50-13

Balas

thanks sob untuk postingannya...
article yang menarik,saya tunggu article berikutnya yach.hehe..
maju terus dan sukses selalu...
salam kenal yach...
kunjungi blog saya ya sob,banyak tuh article2 yang seru buat dibaca..
http://chaniaj.blogspot.com/

Balas

Poskan Komentar


×
Chat