Cara Membuat Recent Post Model Slide

Cara Membuat Recent Post Model Slide

Tapi sebelumnya saya akan menjelaskan secara singkat apa itu Recent Post..?
Recent Posts adalah widget yang menampilkan beberapa judul posting terbaru, yang bisa anda tampilkan pada sidebar sehingga pengunjung lebih mudah mengetahui posting-posting yang terbaru.

Biasanya recent post hanya menampilkan link judul atau dengan Thumbnail Image. Namun sekarang ada yang sedikit berbeda yaitu recent post dengan Thumbnail Image dengan model Slide Show (bergerak turun).

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://rizki-khaizir.googlecode.com/files/recentpostslidethumbnails.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 25;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

5. Klik Simpan
6. Lihat hasilnya.

Keterangan dan Catatan :

1. Untuk membuat halaman menjadi lebih tinggi, gantilah nilai height:282px sesuai keinginan;
2. Untuk mengganti kecepatan, rubahlah nilai var speed = 400; sesuai keinginan sobat;
3. Rubahlah nilai var numposts = 25; untuk menampilkan jumlah postingan;
4. Rubahlah nilai var numchars = 75; untuk mempilkan jumlah karakter;
5. Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau sobat bisa langsung masukkan feeds sobat dalam script tersebut.

Selamat mencoba, sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.

Artikel terkait :