Widget Recent Post ini sebenarnya berfungsi untuk menampilkan artikel terbaru dari blog kita. Namun kebanyakan tutorial yang menjelaskan ...
Widget Recent Post ini sebenarnya berfungsi untuk menampilkan artikel terbaru dari blog kita. Namun kebanyakan tutorial yang menjelaskan tentang pembuatan widget ini tampilannya masih sangat sederhana atau dapa dibilang agak kurang memuaskan jika dipandang. Kali ini saya akan menjelaskan bagaimana cara membuat Widget Recent Post menjadi lebih menarik dan lebih keren. Dengan widget yang menarik dan keren ini saya yakin pengunjung blog anda betah berlama-lama untuk melihat artikel terbaru anda.
- Buka akun Blogger anda
- Pilih
Tata Letak
--Tambah Gadget
--HTML/JavaScript
- Letakkan kode berikut di dalamnya
- Setelah itu tinggal
Simpan
<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://bagisecret.blogspot.com/2015/09/membuat-widget-recent-post-lebih-menarik.html" title='Recent Posts Widget' rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: center;width: 90%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; right: 0px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: -5px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.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: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>