Cara Membuat Recent Post Berjalan Gaya Slide

Pada tutorial blogger kali ini saya akan menuliskan cara membuat recent post berjalan di blogger dengan gaya slide. Sebenarnya tutorial cara membuat recent post berjalan di blogger ini sudah lama ada, namun baru saya muat di blog ini.

Ada banyak cara membuat recent post / widget artikel terbaru di blogger, dan sebagian sudah saya tuliskan, yaitu :

• Membuat Recent Post dan Coment Di Blogger
• Bikin Recent Post by Label With Thumbnail Script
• Membuat Recent Post by Label Thumbnail Saja

Bagi teman-teman yang ingin pasang widget recent post berjalan diblognya silakan baca terus ya :-)

Oh ia, sebelumnya mungkin teman-teman ingin melihat bagaimana sih tampilan nya nanti, agar tidak seperti beli kucing dalam karung silakan lihat gambar berikut, atau klik link demo di bawah

Klik Di Sini Untuk Melihat Demo Langsung

Cara Membuat Recent Post Berjalan Di Bogger

Tutorial ini sebenarnya tidak jauh berbeda dengan tutorial blogger lainnya, perbedaannya hanya pada script yang dipasang saja, yaitu script recent post berjalan. Dan bagi kamu yang sudah hafal betul cara menambahkan widget di blogger maka kamu bisa lewati beberapa langkah berikut dan langsung ambil scriptnya saja.

Langkah-langkah pasang recent post berjalan di blogger

1. Login ke blogger
2. Klik menu Tata Letak

3. Klik Tambah Gadget, pilih gadget Html/JavaScript


4. Masukkan kode yang sudah saya sertakan di bawah di dalam nya
5. Simpan & Selesai

Berikut script yang harus dipasang :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<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://ahmad-rifai-tools.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>

Keterangan :

1. Untuk mengatur tinggi widget silakan ganti lah angka 282 pada height:282px.
2. Untuk mengatur kecepatan slide silakan ganti angka 400 pada var speed = 400;.
3. Ganti angka 5 pada kode var numposts = 25; untuk mengatur jumlah posting yang ditampilkan.
4. Ganti angka 75 pada kode var numchars = 75; untuk mengatur jumlah karakter artikel.
5. Feed sobat harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh" atau sobat bisa langsung masukkan feeds sobat dalam script tersebut.

Keterangan Tambahan : 

Pada script tersebut ada kode

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Letaknya paling atas, jika pada template kamu sudah ada script jQuery 1.42 maka kamu tidak perlu menyertakan script tersebut (silakan hapus) karena 1 saja sudah cukup, walaupun letaknya tidak berdekatan.

Untuk mengetahui kode tersebut ada atau tidak silakan lihat sumber halaman atau source code blog kamu (baca : 2 Langkah Mudah Melihat Source Code WebBlog), kemudian cari kode tersebut (baca : Cara Mudah + Cepat Mencari Kode Html di Blogger).


Nah itulah tutorial cara membuat recent post berjalan atau recent post gaya slide di blogger, selamat mencoba dan semoga bermanfaat.