Sabtu, 12 Mei 2012

Membuat Recent Post Dengan Thumbnail Bergerak

   Membuat Recent Post Dengan Thumbnail Bergerak - Jika sebelumnya saya sudah menjelaskan bagaimana cara membuat recent post berupa tulisan yang berjalan dari bawah ke atas, pada kesempatan kali ini Maen Blogging ingin berbagi tentang bagaimana cara membuat recent post dengan thumbnail/gambar. Tampilan yang dihasilkan dijamin bakal bikin blog kalian makin cantik dan elegant.
     Berikut langkah-langkahnya :
  • Buka akun blogger anda
  • Pilih Tata Letak - Tambah Gadget - HTML/Javascript
  • Lalu copy pastekan kode berikut
<center><style type="text/css">
#rp_plus_img{height:300px;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:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;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 #F68629;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://theplick.googlecode.com/files/newsticker-plick.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 = 10;
var numchars = 0;
</script> <script src="http://maenblogging.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>
  •  Simpan dan lihat hasilnya
Keterangan :
- anda bisa ganti jumlah numposts sesuai dengan keinginan anda
- ganti alamat diatas dengan alamat blog anda

0 komentar:

Posting Komentar