5 Recent Post Keren Thumbnail Blogger

Pada ulasan ini aku akan banyak sekali tutorial cara membuat Recent Post Dengan Gambar di Blog.

Recent Post ialah widget yang membantu pemilik Blog menampilkan konten-konten terbarunya, sangat bermanfaat tentunya. Sehingga pembaca akan selalu mengikuti dan mengetahui warta ter-update pada web atau Blog tersebut.

Apakah Anda sedang mencari widget Recent Post? Yupss, disini Anda dapat menemukannya. Disini tersedia 5 (lima) Recent Post KEREN dengan gambar. Silahkan Anda pilih dan padukan dengan tampilan web atau Blog kesayangan Anda.

<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://bingo-sitevmzbdoyrfvb.blogspot.com//search?q=5-cara-membuat-recent-post-keren-dengan" 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>
Berikut tampilan dari isyarat diatas :

<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://bingo-sitevmzbdoyrfvb.blogspot.com//search?q=5-cara-membuat-recent-post-keren-dengan">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://bingo-sitevmzbdoyrfvb.blogspot.com//search?q=5-cara-membuat-recent-post-keren-dengan" 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: left;width: 100%;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; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
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>
Berikut tampilan dari isyarat diatas :

Note :
var posts_no = 5; (5 ialah jumlah postingan yang akan di tampilkan)
var showpoststhumbs = true; (Jika tidak ingin menampilkan gambar ganti "true" manjdi "false")
var readmorelink = true; (Jika tidak ingin menampilkan readmore ganti "true" manjdi "false")
var showcommentslink = true; (Jika tidak ingin menampilkan komentar ganti "true" manjdi "false")
var posts_date = true; (jika tidak ingin menampilkan tanggal ganti "true" manjdi "false")

Bagaimana sobat Blogger, tampilan Blog Anda menjadi semakin anggun dan menarik bukan dengan Recent Post di atas. Terima kasih sudah berkunjung dan agar bermanfaat.

Share this post