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.

11 Komentar "Cara Membuat Recent Post Model Slide", Baca atau Masukkan Komentar

My Life Style said...

sangat membantu

Sharing With You All In The World said...

Visit My Blog http://angga-fian.blogspot.com/

Akhir Mali Gayo said...

mantap gan..dah ane praktikkan..http://arminaven.blogspot.com/ thank's ya gan

wisnu murti said...

mantap :) maskih infonya. kunjungbalik ya :) jangan lupa like fan[age dan follw blog ini :)

Catatan darmanto said...

trimaksih sobat atas tipsnya,sangat membantu buat newbie yang ingin tampilan blognya lebih fariatif seperti saya .

fajrin ilham said...

sangat bermanfaat sobat
jangan lupa follow back ya
http://www.fajrin-master-pc.tk/

Ditatap Sitompul said...

Widih, postingan menarik nih, sukses hasilnya, thanks, gan liat yuk

http://pisscor.blogspot.com/

Fandi Adhitya said...

mantab gan infonya

ONLYX-45 said...

terima kasih infonya

Sauqi Syahtia said...

Thanks gan infonya
kunjungi http://sauqisyahtia.blogspot.com/

Rizky Agung said...

thanks tutorialnya kunjungi juga robot-teknologi.blogspot.com

Followers