Recent Post yang menarik dengan thumbnail pada Blog style 3

Artikel ini ialah lanjutan dari artikel sebelumnya ,dan kali nie untuk style yang ke 3.

Seperti yang telah dijelaskan sebelum ini , widget Recent Post adalah widget ialah untuk menunjukkan artikel yang terakhir dipublish . Dengan adanya widget ini, maka beberapa artikel yang baru kita publish akan terkumpul dalam suatu daftar dalam widget di sidebar blogger Anda. Pemasangan widget ini di blog Anda akan sangat bermanfaat dan boleh meningkatkan jumlah kunjungan pada halaman blog Anda. Selain itu akan membuat blog anda menjadi lebihberseri dan menarik perhatian pengunjung untuk mengklik dan membaca isi dari posting yang disediakan.

Copy kode dibawah dan ikuti langkah seterusnya :

• Anda boleh mengubah var posts_no = 5 dengan nombor yang anda ingin siarkan di laman blog anda

<script style="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://jeritanblog.blogspot.com" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>

Bagaimana Untuk Tambah Recent Post yang menarik dengan thumbnail pada Blog

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak; 
3. Pilih HTML/Javascript;

2.Letakkan kode yang telah anda copy dalam kontent yang telah anda buka tadi.

Klik save dan anda boleh lihat dilaman blog anda......