Banyak cara untuk menampilkan recent post pada blog kita, agar blog kita tampil cantik kita bisa juga membuat recent post kita dengan recent post bergambar. selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya,sama halnya dengan artikel terkait atau related post,recent post juga bisa dengan tampilan thumbnail,nah kali ini saya akan memberi tutorial tentang cara membuat recent post Berjalan lihat gambar dibawah ini:
Sebelumnya saya juga telah posting cara membuat recent post dengan gambar,lalu bagaimana agar gambar tersebut bisa tampil dengan slide show? ikuti tutorial dibawah ini:
Sebelumnya saya juga telah posting cara membuat recent post dengan gambar,lalu bagaimana agar gambar tersebut bisa tampil dengan slide show? ikuti tutorial dibawah ini:
- Login ke akun Blogger sobat
- Klik Rancangan >> Elemen haLaman
- Klik Tambah Gadget
- Pilih HTML/Javascript
- Masukan kode berikut :<center><style type="text/css">
#rp_plus_img{height:350px;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:#32F628;}
#rp_plus_img .news-title{display:block;font-size:12px;font-weight:bold !important;color:#32F628;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:13px;padding:4px;border:solid 1px #F68629;width:70px;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 = 5;
var numchars = 0;
</script> <script src="http://www.alvin-service.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>
- Simpan
Note :
- Url yang berwarna merah ganti dengan Url sobat
- Angka yang berwarna biru jumlah post yang ingin di tampilkan
0 komentar:
Posting Komentar