Cara Membuat Slider Recent Post (Dengan jQuery)

Cara Membuat Recent Post Model Slide (Dengan jQuery)

Slider posting artikel 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 ingin membuatnya ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger Anda
2. Klik Design - Page Elements
2. Klik Add gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :


<style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#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:#FFF;}
#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:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #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://skripnyawbw.googlecode.com/files/sliderpostingterbaru.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 = 10;
var numchars = 125;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>


5. Lalu Save
6. Lihat hasilnya


*Keterangan dan Catatan:

- Untuk menghilankan garis tepi ubahlah nilai 1px menjadi 0 pada kode border:solid 1px #585858; (Baris 2)

- Untuk merubah background ubahlah nilai #2f2f2f pada kode background-color:#2f2f2f; atau jika tidak ingin menggunakan background buanglah kode tersebut (Baris 2)

- Untuk merubah warna font judul artikel ubahlah nilai #FFF pada kode color:#FFF (Baris 6)

- Untuk merubah warna font artikel ubahlah nilai #DEDEDE pada kode color:#DEDEDE (Baris 8)

- Untuk merubah ukuran gambar mini ubahlah nilai 55px pada kode width:55px; dan kode height:55px; (Baris 9)

- Jika template blog anda telah terpasang framework jQuery sebelumnya buanglah kode pemanggilan jQuery (Baris 11)

- (Lihat Baris 12)
<script type="text/javascript" src="http://skripnyawbw.googlecode.com/files/sliderpostingterbaru.js"></script>


Script tersebut disimpan di halaman google codenya wbw, jika script pada hosting google code wbw telah maksimal, maka slide bisa jadi eror atau tidak tampil. Untuk mengatasi masalah itu, maka kamu dapat mendownload file script-nya dari halaman google code-nya wbw. Kemudian kamu pindahkan ke halaman hosting kamu sendiri, caranya bisa kamu lihat pada artikel wbw tentang Menyimpan file javascript pada google code.

- Ganti nilai 400 pada kode var speed = 400; untuk mengatur kecepatan (Baris 14)

- Ganti nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya (Baris 15)

- Ganti nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan (Baris 23)

- Ganti nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan (Baris 24)

- Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"

Salah satu blog yang menerapkan slider model ini adalah http://www.wahyu-winoto.com


Selamat mencobanya semoga berhasil dan bermanfaat... :)




*****