Cara Mencantumkan Komentar di Sidebar Ada Gambarnya

Cara Mencantumkan Komentar di Sidebar Ada Gambarnya . Lama nian saya dalam blog ini tidak suka menulis tentang tutorial blog. Tiada lain sebenarnya adalah karena saya merasa kurang menguasai dunia blog, jadi agak merasa kurang percaya gitu lho. Namun apa salahnya hanya sekedar sharing saya poskan juga tentang Cara Mencantumkan Komentar di Sidebar Ada Gambarnya. Ada gambarnya maksudnya ada foto akun komentator yang mengomentari artikel kita. Manfaat membuat komentar di sidebar ini antara lain kita sebagai pemilik blog dapat langsung melihat komentar yang masuk tanpa harus login ke blogger terlebih dahulu. Dan otomatis komentar yang muncul itu adalah komentar terbaru.

Gbr. Contoh hasil yang akan tampil di sidebar

Baiklah langsung saja ke langkah-langkah Cara Mencantumkan Komentar di Sidebar Ada Gambarnya. Langkah-langkahnya mudah sekali, sebagai berikut:

1. Baca basmallah 
2. Login ke akun blogger Anda 
3. Pilih tata letak, lalu klik tambah gadget 
4. Pilih HTML/Javascrip dengan mengklik tanda (+) 
5. Copy kode di bawah ini, kemudian pastekan ke kotak isian yang kosong di bawah kotak judul. Perhatikan dulu hal-hal yang harus disesuaikan. 
6. Kalau sudah dipaste-kan silahkan klik simpan.

Ini kodenya:

<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <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 = 10,
showAvatar     = true,
 avatarSize      = 35,
 roundAvatar   = true,
characters       = 150,
defaultAvatar  = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://petir-fenomenal.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>
PERHATIKAN !

Angka 10 menunjukkan banyaknya komentar yang akan muncul, silahkan disesuaikan

 Angka 35 menunjukkan besar atau ukuran gambar/foto yang dihasilkan (saya rasa sudah cukup tanpa dirubah lagi)

Angka 150 menunjukkan banyak karakter yang ditampilkan, silahkan disesuaikan sesuai keinginan.
URL http://petir-fenomenal.blogspot.com/ diganti dengan URL milik Anda.

Sekian saja semoga bermanfaat dan selamat mencoba.