Cara Membuat Recent Comment + Thumbnail

Oleh Syafdillah

09 Februari 2011

Cara Membuat Recent Comment + Thumbnail. Pada postingan yang lalu sudah diterangkan bagaimana Cara membuat Recent Comment yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Kali ini akan diterangkan Cara membuat Recent Comment yang dilengkapi dengan Thumbnail. Thumbnail itu artinya potongan gambar atau foto, yang tentunya disini adalah gambar atau foto pemberi komentar.

Banyak postingan di internet yang telah menjelaskan bagaimana Cara membuat Recent Comment dengan Thumbnail, tapi tidak ada salahnya juga saya memperkaya atau memperbanyak artikel ini dengan tujuan semoga dengan banyaknya postingan Cara membuat Recent Comment dengan Thumbnail akan memudahkan pencarian artikel ini.

Saya tertarik sekali dengan Cara membuat Recent Comment dengan Thumbnail dari W2Blogging yang manis seperti yang digunakan di Bengkel Blog ini. Jika sobat ingin langsung ke sumbernya boleh saja, atau bisa langsung di sini. Ok, berikut langkah-langkahnya.

Cara membuat Recent Comment dengan Thumbnail

1. Login ke Blog anda > Pilih Design
2. Kemudian Tambahkan gadget (Add a gadged) > lalu masukkan kode script berikut ini:
   

   <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  = 40,
   roundAvatar = true,
   characters  = 40,
   showMorelink = false,
   moreLinktext = "More »",
   defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
   hideCredits = true;
   //]]>
   </script>
   <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
   <script type="text/javascript" src="http://bengkel-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. dan simpan. Selesai

Sedikit penjelasan untuk Recent Comment dengan Thumbnail ini :

numComments = 5
showAvatar = true
avatarSize = 40
roundAvatar = true
characters = 40
showMorelink = false

numComments = 5, akan menampilkan komentar sebanyak 5, di sini dapat dicustom sesuai keinginan sobat silahkan suka-suka maunya berapa komentar yang akan ditampilkan.

showAvatar = true, akan menampilkan Avatar sobat, kalau tidak mau ditampilkan diset "false".

avatarSize = 40, akan menampilkan ukuran Avatar. 40 sesuai dengan yang ada diblog saya. Silahkan sobat mencobanya sesuai keinginan.

roundAvatar = true, akan menampilkan frame bundar. Jika sobat tidak suka dengan frame bundar atau lingkaran, bisa sobat set "false" akan menampilkan frame square atau kotak.

characters = 40, akan menampilkan 40 character pertama sebagai cuplikan komentar yang akan ditampilkan.

showMorelink = false, tidak menampilkan link ke postingan tapi kalau sobat mau menampilkan link ke postingan tersebut harus diset "true".

Ok, semoga bermanfaat.

Ayo Like Facebooknya

Tag : Blogging