Recent Comments Widget dengan Avatar untuk Blogger / Blogspot
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 di sidebar kanan.
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="https://kang-ismet.com/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)
avatarSize = 30
, (ukuran avatar dalam pixel)
characters = 30
, (jumlah karakter yang ditampilkan)
4. Ganti blog.kangismet.net
dengan blog Anda, ganti max-results=5
, sesuai jumlah komentar yang ditampilkan.
5. Simpan.
Update: 20-03-2021
Dikarenakan JavaScript di Googlecode sudah tidak valid, silahkan ganti kode:
http://btreaders.googlecode.com/files/rcwa.js
dengan kode ini :
https://cdn.jsdelivr.net/gh/kangismet/user-blog/rcwa.js
Widget ini menampilkan semua komentar, termasuk Admin. Apabila ingin menghilangkan komentar Admin pada widget ini, silahkan kunjungi Cara Menyembunyikan Komentar Admin Pada Recent Comment.
78 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
makasih info'y ;)
#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>
Seteleh mengikuti saran yang ada di blog ini, alhamdulillah pengunjung saya naik meskipun kurang dari 50/hari.
Terima Kasih Kang
terima kasih bang ismet
ijin tes n pasang gan...
sekali lagi thx alot
(kayak widget share dan g+/facebook page di didebar kanan blog ini)
makasih kang
http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
Salam blogging.
http://frlangue.blogspot.com
http://ubuntu-roy.blogspot.com/
langsung ke TKP aja ea sob..
cantik loh recent comment nya ,,
wilujeng ngeblog
Gimana sich kl seandainya dikomentar itu juga ditampilkan link yang dikomentari supaya nggak ribet buat yang udah dibalas komentarnya..
Makasih..KEEP POSTING
mohon bantuannya, mas.
habis baca tutorial di Blogger Tune-Up
gak ngerti juga..
akhirnya dapat di blog Kang Ismet, lebih simple dan dinamis..
visit back broo.. :D
mksih ya bang ! 100 jempol deh (y)
follback blog saya bang ! blog abang sdah sya follow :)
thanks gan