Modifikasi Artikel Terbaru/Recent Post Blogger Keren Terbaru

penampakannya

Hai blogger mania
Ketemu lagi dengan admin klikinfo. Dan kali ini, seperti yang tercantum judul diatas. Admin akan berbagi lagi tentang trik membuat recent post widget keren terbaru. Buat kalian yang hobi mengutak-ngatik blognya, yuk langsung saja disimak ya.

1. Masuk akun blogger kamu
2. Pilih tata letak
3. Pilih letak widget yang akan kamu pasang widget ini. (sesuai selera)
4. Masukan kode/script dibawah ini kedalam widget HTML yang kamu pilih tadi.

<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. Save/Simpan.

Mudah bukan blogger mania? Untuk kamu yang suka dengan widget blogger lainnya. Kunjungi juga ya kategori widget blogger di situs ini.

Semoga bermanfaat.

Widget Blogger