Tuesday, January 1, 2013

Widget Recent Comment dengan Avatar

Pada kesempatan kali ini saya akan membahas cara menambahkan widget recent comment atau komentar terbaru dengan avatar, script dari way2blogging yang sedikit saya modifikasi, kurang lebih seperti gambar diatas. Widget ini berfungsi untuk menampilkan komentar terakhir pada blog anda, sebenarnya bisa menggunakan widget recent comment bawaan blogger/blogspot, tapi tampilanya seidkit kurang menarik. Dengan widget recent comment dari way2blogging tampilannya lebih stylish..

Berikut cara menambahkan widget Recent Comment dengan Avatar:

- Masuk ke Tata Letak > Tambah Gadget > HTML/JavaScript,
kemudian salin kode berikut ini dan letakkan di dalamnya.

<div style="overflow:auto;width:100%;">
<style type="text/css">
ul.w2b_recent_comments{
    list-style:none;margin:0;padding-top:0px;
}
.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;border-bottom:1px solid #AD3000
    }
.w2b_recent_comments li .avatarImage{
    border:4px double #ad3000;padding:0px;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{
    box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
    }
.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: none;line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 62,
roundAvatar = true,
characters = 100,
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8O0JdgLhcgrByiGR8m7_jXzPXzykDMU2NuZ5KLNOqZ3edd0aMIDthHafvJ-9ReUTYjefa8v13tBNmZLJUVbAcJ5SQy3cFUbA6dvJrUBlZUOKyWu_oC1IFVHNVHYnDrqBshK4so3RCdpY/s1600/Anonim20.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://boyz.googlecode.com/svn/JS/Recentcommentsavatar.txt"></script>
<script type="text/javascript" src="http://www.mdf-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=7"></script>
</div>

- Kemudian Simpan

Silahkan anda sesuaikan sendiri
Keterangan:
numComments = 7, merupakan jumlah koemntar yg di tampilkan pada widget

showAvatar = true, untuk menampilkan avatar pada widget, jika tidak ingin di tampilkan ganti true dengan false.

avatarSize = 62, merupakan ukuran gambar atau avatar pada komentar.

characters = 100, merupakan jumlah kata pada widget koemntar, //ganti angka 100 sesuai keinginan anda.

defaultAvatar, merupakan gambar yg tampil jika yg berkomentar tidak menggunakan foto profil. silahkan anda ganti tulisan yg berwarna ungu dengan alamat/URL gambar anda.

Ganti http://www.mdf-blog.blogspot.com dengan alamat blog/website anda.

Semoga bermanfaat.

Judul: Widget Recent Comment dengan Avatar; Ditulis oleh Unknown; Rating Blog: 5 dari 5