Selamat datang ke BelajarBlogs...
Home » » Recent Post yang menarik dengan thumbnail pada Blog style 2

Recent Post yang menarik dengan thumbnail pada Blog style 2




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

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 = true;
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=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>


Bagaimana Untuk Tambah Recent Post yang menarik dengan thumbnail pada Blog

Langkah 1
1. Login ke BloggerKlik 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......


2 ulasan: