Widget Recent Post Blogger untuk Blog
Bagian # 2
awi
Bermacam macam desaign widget recent post untuk blog diantaranya akan saya bagi menjadi 4 bagian. Widget ini berfungsi untuk menampilkan posting terbaru pada blog kalian, jika berminat silahkan copy kode html di bawah ini.
Berikut adalah kodenya :
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</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://www.seocips.com/2016/01/widget-recent-post-untuk-blogger-blog-part-2.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; width: 100%}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A;}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092;}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.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: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }</style> ""
Cara memasang widget recent post bagian 2 ini :
- Masuk blogger dan pilih blog yang akan dipasang widgetnya
- Pilih "layout" kemudian "add a gadget" dimana kamu akan meletakkan widget
- Muncul pop-up window dan pilih "HTML / JavaScript"
- Masukkan kode diatas kedalam kolom konten
- Save dan selesai, Selamat widget recent post blogger bagian 2 sudah terpasang di blog kamu.