Cara Membuat Recent Post dengan Thumbnail

By Unknown

Senin, 21 November 2011

Recent Post kali ini mungkin sedikit berbeda dengan lainnya, karena saya buat statis dan tampilan lumayan bagus. Ok sekarang mari kita bahas bagaimana cara emmbuat recent posn dengan thumbnail. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

 <style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:right;margin:0 0 5px 10px;}
.recent_posts_with_thumbs
{float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;
padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script style='text/javascript' src="http://code.helperblogger.com/hb-jquery-ticker.js" ></script> <script style='text/javascript' src='http://code.helperblogger.com/hb-recentposts.js'></script> <script style='text/javascript'> 
var numposts = 10;
var showpostthumbnails = true; 
var displaymore = false; 
var displayseparator = false; 
var showcommentnum = false; 
var showpostdate = false;
var showpostsummary = true; 
var numchars = 100; $(document)
.ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); 
</script>
 <div id="sai">
 <script src='http://NAMA BLOG ANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script> 
</div>

Ganti NAMA BLOG ANDA dengan alamat blog anda.
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+