Cara Membuat Widget Recent Comment

Habis jalan-jalan ke blog sebelah, eh ada yang bagus sob, mohon aja ma empunya blog, buat nyimpen artikel ini, ya kita mulai saja

Widget recent comment adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget recent comment ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.

Dan tentu saja, Agan juga dapat mengubah avatar defaultnya, menambahkan scroll dll.

Bagaimana cara membuat widget recent comment dilengkapi dengan avatar dan isi komentarnya, silahkan ikuti petunjuk dibawah ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:

<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://gemar-
html.googlecode.com/svn/trunk/js/widget-komentar-terbaru-dengan-avatar-bulat.js"&
gt;</script>
<script type="text/javascript" src="http://www.catatan-piper-
comex.blogspot.com/feeds/comments/default?alt=json&
amp;callback=w2b_recent_comments&max-results=5"></script>

4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar. Semoga bermanfaat.

Sumber:

http://catatan-piper-comex.blogspot.com/2013/03/cara-membuat-widget-recent-comment.html