Membuat Recent Comment dengan Avatar - Bagi para blogger yang blognya aktif dikunjungi tentunya sangat membutuhkan widget Recent Comment karena dengan widget ini akan mempermudah dalam mengelola komentar-komentar dari para pengikut/pembaca.
Berikut ini saya bagikan cara mudah membuat widget Recent Comment (Komentar Terkini) dengan Avatar. Cara Pemasangannya sangat mudah, yaitu silahkan buat widget baru HTML/JavaScript dan copas kode di bawah ini didalamnya.
numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='dzul Aceh' (nama admin blog, wajib diganti)
Nama adminBlog ganti dengan nama profil google anda.
Semoga Bermanfaat!
Berikut ini saya bagikan cara mudah membuat widget Recent Comment (Komentar Terkini) dengan Avatar. Cara Pemasangannya sangat mudah, yaitu silahkan buat widget baru HTML/JavaScript dan copas kode di bawah ini didalamnya.
<style type="text/css">
ul.dzul_komentar{list-style:none;margin:0;padding:0;}
.dzul_komentar li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.dzul_komentar li:hover{border: 1px solid #ddd;}
.dzul_komentar a {text-decoration:none;}
.avatarImage{padding:3px;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{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.dzul_komentar li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 4,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='dzul Aceh';
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/dzultemplate/javascript/dzul_recentcomment.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=dzul_komentar&&max-results=50">
</script>
Agar tampilan lebih menarik, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='dzul Aceh' (nama admin blog, wajib diganti)
Nama adminBlog ganti dengan nama profil google anda.
Semoga Bermanfaat!
Ngk work gan kodenya... kalau boleh ane req kode widget recent post dengan tag artikel gan.. tnks!
seharusnya work gan, krna ane pke script yg sama. Kalo emang gak work agan pindahin file .js "https://sites.google.com/site/dzultemplate/javascript/dzul_recentcomment.js" ke hosting lain gan..
ini gan tutorial recent postnya: http://dzulaceh.blogspot.com/2015/06/membuat-widget-recent-post-berdasarkan.html