Recent Post Keren untuk Blog

Blog perlu diperindah pula, biar pengunjung pada betah, keren tapi bukan kumuh karena banyak widget yang mengganggu pembaca dan akhirnya terhalang oleh widget, pergi deh si pembaca itu. Widget recent post ini ramah, sederhana, tapi elegan loh dan tentunya tidak mengganggu para pembaca.

Mau widget recent post keren ala helpblogger? kalau mau silahkan pilih style widget recent post yang sesuai dengan template blog anda.

Style 1

    <div class="recentpoststyle">
    <script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
    <script>
    var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
    <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
    </script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
    <noscript>Your browser does not support JavaScript!</noscript>
    <style type="text/css">
    .recentpoststyle {counter-reset: countposts;list-style-type: none;}
    .recentpoststyle a {text-decoration: none; color: #49A8D1;}
    .recentpoststyle a:hover {color: #000;}
    .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
    li.recent-post-title { padding: 5px 0px;}
    .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
    .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
    .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
    .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
    </style></div> 

Hasilnya...

Style 2

 <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</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://helplogger.blogspot.com">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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.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: 0px 10px 5px 35px;}
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: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style> 

Hasilnya...

Cara penerpannya mudah:

1. Tinggal masuk dashboard blog
2. Klik layout/tata letak
3. Add a gadget-HTML/java script
4. Save
5. Selamat mencoba!

Sumber