Cara Bikin Recent Post Berjalan di Blogger

Dapodik Grobogan Blog's on

24 Februari 2015

Pada tutorial kali ini saya akan menuliskan cara membuat recent post berjalan di blogger dengan gaya slide. Saya bikin tutorial ini karena ada kawan bertanya bagaimana cara bikin Recent Post berjalan. Karena yang saya punya adalah Blogger jadinya saya praktikan di Blog kesayangan saya.

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 Layout atau 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:350px;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="https://mediainfo-recentpost-with-thumb.googlecode.com/svn/branches/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 = 7;
var numchars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<small><a href="http://media-info.web.id" target="_blank">Blogger Widget</a></small>
<small><a href="http://media-info.web.id" target="_blank">Get This Widget</a></small>

Keterangan :

1. Untuk mengatur tinggi widget silakan ganti lah angka 350 pada height:350px.
2. Untuk mengatur kecepatan slide silakan ganti angka 400 pada var speed = 400;.
3. Ganti angka 5 pada kode var numposts = 7; untuk mengatur jumlah posting yang ditampilkan. Atau sesuai keinginan berapa post yang mau ditampilkan.
4. Ganti angka 75 pada kode var numchars = 70; 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.

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

Salam,

Labels: Belajar Blog, Tips dan Trik

Thanks for reading Cara Bikin Recent Post Berjalan di Blogger. Please share...!