Membuat recent posts otomatis with thumbnail |
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>
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