Cara Memasang Daftar 'Recent Comment' dengan Thumbnail

Cara Memasang Daftar 'Recent Comment' dengan Thumbnail – Sesuai dengan namanya, fungsi dari widget ini adalah untuk menampilkan komentar – komentar terbaru (recent comment) yang telah dibuat oleh pengunjung blog, yang disertai dengan avatar/foto sang komentator. Komentar ini akan terlihat oleh para pengunjung blog lainnya, dan bersifat clickable (dapat diklik oleh pengunjung blog). Tentu saja, terdapat potensi pengunjung/visitor blog akan mengklik salah satu komentar yang nangkring, dan ujung – ujungnya akan meningkatkan pageview blog Anda. Atau malah ikut berkomentar di posting yang bersangkutan.

Widget ini cocok dijadikan pasangan serasi dengan widget recent post. Oh, iya, dengan keberadaan widget ini dapat membantu mengurangi bounce rate blog . Akan lebih baik lagi jika dikombinasikan dengan widget Artikel Terkait , yang terdapat dibagian bawah posting blog.

Daripada penasaran, silahkan lihat screenshotnya dibawah :

Oke, seperti biasa (to the point). Berikut ini cara memasang widget recent comment dengan thumbnail di blog :

1.     Buka Blogger, dan langsung masuk ke Tata Letak.

2.     Klik link Tambahkan Gadget ditempat Anda ingin memasang widget recent comment.

3.     Pilih HTML/Javascript.

4.     Pastekan kode berikut :

<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  = 60,

 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2CGLyLVmDoODfb3lk4syNRnaODbmw5tbu9xB1qhDd-3CcNAGgiv8fyqEPBargkkZK1Y9gRixE9YAK8sv5ehNvBNCKKvz2b9w3kr8s-VDM1-oCfMqHmrpYpca2Axaoe3G65sjTC5Ap8qK/s1600/gravatar.jpg",

 hideCredits = true;

 maxfeeds=20,

 adminBlog='Aang Airbender';

//]]>

</script>

<script type="text/javascript" src=" https://googledrive.com/host/0ByoCwyjwB1aDSjZOVW9laFRsazA"></script>

<script type="text/javascript" src="http://xxpc123xx.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Keterangan :

5 : Merupakan jumlah komentar yang akan ditampilkan pada widget recent comment. Ganti sesuai dengan keinginan Anda.

Aang Airbender : Merupakan nama Admin/Pemilik blog. Ganti dengan nama Admin/Pemilik Blog di blog Anda.

xxpc123xx.blogspot.com : Merupakan alamat blog yang komentarnya akan ditampilkan dalam widget recent comment. Gantilah sesuai dengan alamat blog Anda.

5.    Terakhir, klik Simpan.

Selamat mencoba! Berikan Google + dan tolong share artikel ini jika bermanfaat. Salam Blogger, dan terima kasih!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

Bagikan di FB Tweet ke Twitter! Bagikan di G+

Thanks for reading! Ingin menyebarluaskan artikel ini? Tolong sertakan juga link sumbernya (Cara Memasang Daftar 'Recent Comment' dengan Thumbnail). Klik juga tombol Google +1 dibawah. Terima Kasih! Klik juga :

Anda sibuk? Tetap baca artikel terupdate dan terbaru dari Tips SEO + Blog – PC 123 melalui e-mail Anda. Caranya? Masukkan alamat e-mail Anda pada kotak berikut ini, dan klik Daftar, dan saya akan mengirimkan artikel terbaru ke e-mail Anda. Saya menjamin privasi Anda. Untuk info lebih jelas mengenai kotak ini, silahkan klik Disini.