Recent Comments dg Thumbnail (Avatar) u Blogger Template Designer

Widget Recent Comments ini sangat jauh berbeda dengan gadget recent comments dari blogger yang dapat anda install melalui "Add a Gadget". Jika gadget recent comment default blogger hanya menampilkan recent comments berupa teks, widget recent comments yang satu ini mampu menampilkan thumbnail/avatar si pemberi komentar seperti yang biasa kita lihat di kolom komentar yang terletak di bawah posting. Dengan bantuan effek opacity, widget recent comments yang hanya menggunakan sedikit javascript ini tak hanya bermanfaat sebagai salah satu penyedia informasi tercepat tentang komentar saja, namun di sisi yang lain juga memberi wajah dan penampilan berbeda pada blog. Menggunakan widget ini juga membuat berbagai modifikasi recent comments jauh lebih mudah dibandingkan jika menggunakan gadget recent comments bawaan blogger. Kode css disertakan sekaligus dalam widget sehingga mempermudah pengguna untuk melakukan berbagai perubahan wajah dan tampilan, seperti misalnya untuk penyesuaian dengan warna blog. Sebuah scrollbox sederhana juga telah ditambahkan dengan tinggi scrollbox max=300px. Untuk merubah tingginya anda hanya perlu merubah nilainya, dimana semakin besar maka box akan semakin tinggi.

Kode CSS, Javascript dan xHTML widget Recent Comments dg thumbnail

Kode CSS, Javascript dan xHTML :

<style type="text/css">
ul.GRrecentCom{list-style:none;margin:0;padding:0;}
.GRrecentCom li{background:none;margin:0 0 6px !important;padding:4px 6px;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px dotted #555;}
.GRrecentCom li .GRavatar{padding:1px;background:#fefefe;box-shadow:1px 2px 2px #000;float:left;margin:2px 10px 0 0;position:relative;overflow:hidden;opacity:0.4;filter:alpha(opacity=40);}
.GRrecentCom li:hover .GRavatar{opacity:1.0;filter:alpha(opacity=100);}
.GRrounded{border-radius:3px;}
.GRcircle{border-radius:50%;}
.GRrecentCom li:hover{text-shadow:2px 2px 2px #888 !important;background:#bbb;border-bottom:1px dotted #888;border-radius:4px;}
.GRrecentCom li img{padding:0px;position:relative;overflow:hidden;display:block;}
.GRrecentCom li span{margin-top:4px;color:#666;display:block;font-size:12px;font-style:italic;line-height:1.4;}
.GRrecentCom li:hover span{color:#000;}
</style>
<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrCommentsAvatar.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var
numComments = 25, /* jumlah komentar */
showAvatar = true, /* false untuk tanpa avatar */
avatarSize = 30, /* ukuran avatar (pixel) */
roundAvatar = false, /* true untuk avatar bulat */
characters = 100, /* jumlah karakter komentar */
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false; /* true untuk menampilkan link widget */
//]]>
</script>
<div style="max-height:300px;overflow:auto;padding:5px 15px 5px 0;border-top:3px double #888;border-bottom:3px double #888;">
<script type="text/javascript" src="http://lightbox-demo-tutorial.blogspot.com/feeds/comments/default?alt=json&callback=GRrecentCom&max-results=25"></script>
</div>

Cara menggunakan dan membuat widget recent comments:

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan Kode css, javascript dan xHTML dalam box HTML/Javascript.
   • Ganti http://lightbox-demo-tutorial.blogspot.com dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

D E M O

Lihat recent comments dalam blog ini!

Catatan :

1. Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com
2. Kode berwarna merah (2 kode) untuk merubah jumlah komentar yang ditampilkan.
3. Kode berwarna kuning untuk merubah ukuran avatar.
4. Kode berwarna biru muda untuk merubah jumlah karakter komentar.

Sumber :

http://www.way2blogging.org