Cara Membuat Recent Posts dengan Thumbnail di Blogspot

Screenshot_5Alfawzy Blog – Cara Membuat Recent Posts dengan Thumbnail di Blogspot, dari artikel sebelumnya membuat recent post sederhana tanpa thumbnail, tutorial kali ini yaitu membuat widget recent post dengan thumbnail gambar dari masing-masing post, dengan menggunakan gambar thumbnail tampilan widget akan lebih lengkap dan tentunya lebih menarik, apalagi jika gambar dari post tersebut bisa menarik perhatian pengunjung untuk membacanya.

Recent posts dengan gambar ini tampilannya sama persis dengan populer post widget bawaan blogger seperti gambar diatas, berikut Cara Membuat Recent Posts dengan Thumbnail di Blogspot :

  1. Log in ke akun blogger
  2. masuk ke dashboard blog yang dipilih
  3. klik tata letak dan tambahkan widget HTML/Javascript
  4. Copas kode dibawah ini didalamnya
<style type='text/css'>
 img.recent_thumb {padding:1px;width:72px;height:72px;border:0;
 float:left;margin: 10px 10px 5px 0px;}
 .recent_posts_with_thumbs {float: left;width: 100%;margin: 10px 10px 5px 0px;padding: 0;font-size:13px;}
 ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;}
 .recent_posts_with_thumbs strong {font-size:12px;}</style>
 <script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
 <script style='text/javascript'>
 var numposts = 5;
 var showpostthumbnails = true;
 var displaymore = false;
 var displayseparator = false;
 var showcommentnum = false;
 var showpostdate = false;
 var showpostsummary = true;
 var numchars = 150; </script>
 <script src='http://blogkamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

ubah jumlah post yang ingin ditampilkan dan url blog.