Buat sobat semua yang senang menghias blog terutama blogspot dengan widget-widget cantik yang menarik mungkin Recent Post Dengan Thumbnail yang perpindahannya hampir saling tindih menindih antara satu dengan yang lain ini bisa menjadi pilihan buat sobat.
Untuk membuatnya terbilang cukup mudah sobat tinggal copas aja code dibawah ini dan untuk memasukkan kedalam widget sidebar, sobat masuk dulu ke dalam menu Tata Letak => Add Gadget => Pilih Html/Javascript. Selanjutnya paste aja codenya dalam area kosong yang muncul.
<center><style type="text/css">
#rp_plus_img{height:250px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
# rp_plus _img ul{list-style-type:none;margin:0;padding:0}
# rp_plus _img li{border:1px; margin:0; padding:0; list-style:none;}
# rp_plus _img li{height:60px;padding:5px;list-style:none;}
# rp_plus _img a{color:#000000;}
# rp_plus _img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#800000;text-align:justify;}
# rp_plus _img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
# rp_plus _img img{float:left;margin-right:14px;padding:4px;border:solid 1px #cccccc;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://bl1t4r.googlecode.com/files/recentpostscroolthum.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id=" rp_plus _img"><script>var numposts = 5;
var numchars = 0;
</script> <script src="http://bl1t4r.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>
#rp_plus_img{height:250px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
# rp_plus _img ul{list-style-type:none;margin:0;padding:0}
# rp_plus _img li{border:1px; margin:0; padding:0; list-style:none;}
# rp_plus _img li{height:60px;padding:5px;list-style:none;}
# rp_plus _img a{color:#000000;}
# rp_plus _img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#800000;text-align:justify;}
# rp_plus _img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
# rp_plus _img img{float:left;margin-right:14px;padding:4px;border:solid 1px #cccccc;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://bl1t4r.googlecode.com/files/recentpostscroolthum.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id=" rp_plus _img"><script>var numposts = 5;
var numchars = 0;
</script> <script src="http://bl1t4r.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>
Keterangan:
Ganti http://bl1t4r.blogspot.comdengan URL blog sobat
var numposts = 5; item yang muncul dalam sidebar sobat nantinya silahkan ganti nilainya dengan yang lebih besar atau lebih kecil sesuai selera sobat. Intinya sobat bisa otak-atik yang saya cetak merah tersebut dan sesuikan dengan template sobat.
Sisanya silahkan sobat otak-atik sendiri sambil belajar karena saya sendiri juga dalam tahap belajar dan apa yang saya dapat saya terapkan dulu baru selanjutnya saya jadikan postingan seperti ini.
Selamat Mencoba!...
0 Komentar untuk "Membuat recent post dengan thumbnail"