Cara Membuat Widget Recent Post Keren Terbaru

Jadilah Umat Terbaik Dengan Saling Menasehati
Google+
penampakan widgetnya


Hai blogger mania.

Walaupun sudah banyak yang berbagi trik cara membuat widget ini. Tapi kali ini admin akan memberikan yang terbaik bagi blogger. Alias gak akan kalah keren dengan yang sudah-sudah. Nah,blogger mania, bagi kamu yang sedang mencari bagaimana membuat widget recent post di blogger sesuai gambar diatas, dibawah ini adalah ulasannya, disimak ya.
  1. Buka akun blogger kamu
  2. Masuk Tata letak dan HTML
  3. Pilih letak widget HTML sesuai keinginkan kamu.
  4. Masukan kode dibawah ini kedalam widget HTML yang kamu pilih.

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/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 = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #ffffff; float: right; margin: 5px;" href="http://helplogger.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: 80px;margin: 5px 0px 5px 0px;padding: 0;font-size:13px;}
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: 14px; text-transform: uppercase; color: #ffffff;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}

</style>


    5. Klik Save/Simpan


Mudah bukan sahabat blogger?
Sekian dulu ya artikel dari admin. SALAM BLOGGER mania!