Senin, 16 Desember 2013

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 :

Preview widget recent comment yang telah dipasang di blog (Gambar tidak terlihat? Klik kanan tulisan ini, dan pilih 'Reload Image')

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  = "http://2.bp.blogspot.com/-8Q9HWupLT6I/Uq7NTv0eVbI/AAAAAAAABII/xkUOToEcm7o/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!

1 komentar:

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!