Recent Post yang menarik dengan thumbnail pada Blog style 1

Artikel ini ialah lanjutan dari artikel sebelumnya ,iaitu Recent Post yang menarik untuk Blog.Bezanya,widget ini ialah sedikit menarik kerana disertakan dengan thumbnail dan desription yang singkat.

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/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></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=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.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: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</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;

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

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