Cara Membuat Recent Post dengan Thumbnail Versi 2

Unknown

Trik Blog

8 Nov 2013

Belum ada komentar

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




<div style="overflow:auto; width:100%px; height:350px; padding:10px; border:1px solid #444444;">
 <style>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;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 = 30;
var showpostthumbnails = true; 
var displaymore = false; 
var displayseparator = false; 
var showcommentnum = false; 
var showpostdate = false;
var showpostsummary = false; 
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://wayansusandiarta.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script> 
</div></div>


Ganti http://wayansusandiarta.blogspot.com dengan alamat blog anda.
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu