Membuat Recent Comment With Avatar Profile




Recent comment Merupakan sebuah widget yang berfungsi untuk menampilkan komentar terbaru yang ada blog kita.

Pada pertemuan kali ini AbduGreen-Blog akan membahas tentang cara membuat Recent Comment yang lebih menarik. Yaitu recent comment yang bisa menampilkan komentar beserta thumbnail/gambar/avatar si komentator.

Biasanya widget ini sering terlihat di wordpress, ya seperti itulah tampilannya. Jadi akan ada avatar (gambar) nama, dan isi komentar. Tentunya widget ini akan membuat tampilan blog lebih menarik. Langsung saja kita praktekan..!!

Cara Membuat Recent Comment Avatar.
1. Login ke akun blogger.com
2. Pilih Tata Letak lalu tambahkan Tambah Gadget > HTML/Javascript
3. Kemudian masukan kode berikut ini:

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_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  = 10,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://oopz-shootz.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=10"></script>

4. Sebelum disimpan ganti http://oopz-shootz.blogspot.com dengan URL blogmu sendiri. 10 adalah banyaknya komentar yang akan ditampilkan 50 adalah ukuran avatar dan 60 adalah banyaknya karakter komentar yang muncul.
5. Simpan dan lihat hasilnya.


NB : Jika anda ingin memberi scroll pada widget Recent Comment With Avatar ini, Tambahin aja kode berikut, sehingga hasilnya akan seperti ini :

<div style="overflow:auto;padding:0 10px; width:auto; height:260px;border:1px solid #bbb;">

<--- LETAKKAN KODE WIDGET RECENT COMMENT WITH AVATAR DISINI --->

</div> 

Mudah kan..?? Sekian dulu postingan kali ini, Semonga bermanfaat.

Comments
0 Comments

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-p =))

Posting Komentar

Mohon dengan sangat untuk berkomentar dan saran demi kemajuan bersama,, beri kritik yang bermanfaat dan jangan lupa join blog ini..!
oke??? terima kasih :)

Recent Comment

Submit Link & Link Sahabat

Bagi yang ingin Link nya di pasang di sini,
silakan isikan data-data dibawah, lalu klik SUBMIT
Nanti akan di munculkan!
Jangan Lupa di Backlink Juga ya?!
==Teman oopz-shootz==