Membuat recent posts dengan thumbnail

Tampilan recent post yang dimodif seperti popular post (dengan thumbnail, judul, dan cuplikan artikelnya) sepertinya sangat menarik.
Dengan meletakkan kedua widget tersebut (popular post dan recent post) berjajar atau disusun secara vertikal pada satu kolom akan lebih manis pula.

Untuk pemasangan widget ini, penulis akan mencoba untuk mempermudahnya, hanya dengan menambahkan widget pada blog jadi tanpa membongkar kode-kode yang ada di template-nya.
Baca juga: Cara mudah membuat recent comments dengan avatar
Mari kita mulai..
Buka draft blogger
Menu tata letak
klik "tambahkan gadget" pada posisi yang dikehendaki
Lalu pilih HTML/JavaScript, beri judul..
Setelah itu paste-kan kode ini kedalam teks area HTML/JavaScript
<style type='text/css'>
img.recent_thumb {
width:65px;
height:65px;
border:0;
float:left;
margin:0 8px 5px -5px;
}
.recent_posts_with_thumbs {
float: left;
width: 100%;
min-height: 50px;
padding: 0;
}
ul.recent_posts_with_thumbs li {
padding-bottom:5px;
padding-top:5px;
padding-left:0px;
padding-right:20px;
margin-left:-10px;
min-height:50px;
list-style:none;
}
.recent_posts_with_thumbs a {
text-decoration:none;
}
</style>
 <script type='text/javascript'>
var numposts = 4;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 140;
</script>
 <script type="text/javascript" src="http://style-romli-net.googlecode.com/svn/recentpost---thumbnail.js"></script>
<script src="http://blogger-perak.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs" type="text/javascript"></script>

Ganti value var numposts untuk merubah jumlah artikel yang ingin ditampilkan.
Dan ganti juga blogger-perak.blogspot.com dengan URL sobat sendiri.

Semoga Bermanfaat..

IBX59E89E6F98B8E