Cara Memasang widget Recent Comment dengan Avatar untuk Blogger template designer

W

idget 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.

2.Klik "Sign in/Log in

3.Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".

4.Klik "Rancangan (Design)".

5.Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".

6. 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".

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