Cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Recent Comments dengan Avatar.
Recent comments adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avatar atau foto profil komentator di dekat tulisan komentar, membuat Recent Comments dengan Avatar ini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.
Langkah Membuat Recent Comments dengan Avatar
1. Masuk ke account Blogger2. Klik Layout/ Tata Letak
3. Klik Add a Gadget/Tambahkan element Baru
4. Tambahkan HTML/JavaScript
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.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;}
.w2b_recent_comments li .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;}
.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: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://indolaron-js.googlecode.com/svn/trunk/Recent_Comments_With_Avatar.js"></script>
<script type="text/javascript" src="http://indolaron.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>5. Ganti indolaron.blogspot.com dengan blog Anda.6. Simpan
Keterangan:
avatarSize = 30 : Ukuran avatar atau gambar profil
characters = 30 : Jumlah kata pada komentar yang ingin ditampilkan.
jumlah angka 5 : Jumlah komentar yang ingin ditampilkan
SELMAT BERKREASI....
a suka n a mo cob di blog a ..... mau donk bagi2 komennya buat blog a yang tergolong masih jadul...
ReplyDeletea ganti kok kotaknya gk muncul yach? minta sarannya gan!
ReplyDelete@nurul hidayati
ReplyDeleteKotakan seperti mana Gan?
Klo pengen widget-nya di beri kotakan,sepertinya itu setting code fotter/sidebar pd masing2 template.
Coba agan tambahkan beberapa code CSS berikut; (ini sesuai pd template agan saat ini,)
* Cari code css: .footer-outer
tambahkan code: border:1px solid #555;margin:10px 10px 0;padding:6px 0 7px 10px
* Cari code css: .footer-outer .widget h2
tambahkan code: border:1px solid #ccc; border-bottom:2px solid #ccc; margin:5px 0
Lalu save....dan liat perubahan-nya,jika tidak sesuai dengan snang hati saya akan mencoba membantu :)
link sudah terpasang sob, sila di cek :drummer:
ReplyDeletewah, keren ne gan, makasih gan udah berbagi ilmunya..
ReplyDeletedi tunggu kunjungannya gan di http://ilmunyentrik.blogspot.com/
Terimakasih :) Saya sudah mencoba dan berhasil :)
ReplyDeletekeren gan, ane pasang di blog aku.. \o/ \m/
ReplyDeletegan, kok komentarnya cuma mentok di 5??
ReplyDeleteudah ane buat jadi 20, tapi yg muncul tetap 5
Maaf gan ane koreksi Tutorial ini dan yang perlu diubah:
ReplyDeletemax-results=5 : untuk menentukan julmah komentar yang akan ditampilkan :-d
makasih gan nfonya,,nambah ilmu ni,, :-d
ReplyDeletegan ijin pake Kodenya saja :-d
ReplyDeleteMonggo silahkan sobat.....di otak-atik sendiri sesuai selera agan ^:D
Deletecara membuat yang lagi saya butuhkan kang ...thnks ya
ReplyDelete