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%;">- Kemudian Simpan
<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/AVvXsEhzmbLFXKOIdwfShAx5g3RJVtPyt1DJ2nS8AMbMQafMssaog_e1uqZSQWm9gRbS1hAOOY3ZB4oDdMwrv55NMufZe7nlIotFFIImduNONLtNqaBk3FDjYL-nGwvxWQZZ9EptHlGF0bvwyBQ/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>
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.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.