Cara Membuat Recent Posts Otomatis With Thumbnail

Selamat malam sobat Caritahu.com. Malam ini Caritahu.com akan berbagi informasi mengenai Cara Membuat Recent Posts Otomatis With Thumbnail. Untuk dapat Membuat Recent Post Otomatis With Thumbnail, ikuti cara-cara di bawah ini :

Membuat recent post bergerak
Membuat recent posts otomatis with thumbnail
1. Login ke akun Blogger sobat.

2. Pilih Tata Letak dan Tambahkan Gadget (Add Gadget), setelah itu klik HTML/Javascript dan copy kode berikut di 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 = 7;
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://www.yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'>
</script> 
</div> 

3. Ganti kode berwarna Biru dengan jumlah postingan, ganti kode true warna Pink dengan false bila sobat ingin Recent Post tanpa thumbnail, dan juga www.yourblog.blogspot.com dengan URL blog sobat.

4. Setelah itu klik Simpan Template dan lihat hasilnya di sidebar blog.

Baca juga :
12 Tanda Cowok Jatuh Cinta Pada Cewek
10 Film Animasi Karya Anak Bangsa
15 Situs Download Ebook Gratis
Trick Diving PES 2013

                                                                      * * * * * * * *

Sumber kode : Helperblogger

0 Response to "Cara Membuat Recent Posts Otomatis With Thumbnail"

Posting Komentar