expr:class='"loading" + data:blog.mobileClass'>

Wednesday, September 9, 2015

Cara pasang widget RECENT POST di blog

Ingin memasang widget yang cool?

Sungguh mudah. Ikuti langkah-langkah mudah ini:

1-Dashboard Blogger
2-Layout
3-Add a gadget
4-Add HTML
5-Copy kod di bawah yang berwarna ungu tu. Paste dalam HTML
6-Save 
7-View Blog. Siap!


<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 = 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://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>
<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; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
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>


Senang kan?

 Tengok hasil seperti dalam gambar di bawah:

Recent post di blog Natrah Mohamed

Okes, terima kasih sudi baca entri ini.

Share untuk manfaat bersama :)

Natrah Mohamed,
Pengedar Shaklee Bandar Baru Bangi
011-27016822
Related Posts Plugin for WordPress, Blogger...

KENALI SHAKLEE

 photo KENALISHAKLEE_zpsjhrkr5w4.jpg
 photo PRODUKSHAKLEE_zpslwr9bj4b.jpg
 photo CADANGANVITAMIN_zps9fostmqa.jpg
 photo SERTAIKELUARGAKAMI_zpsnwpjxnay.jpg
 photo PENGEDARSHAKLEE_zpsu3sbu1d3.jpg
 photo CAWANGAN SHAKLEE_zpsbm1dxcgx.jpg

Pengunjung

Designed by NH Design