Cara Membuat Recent Post Gambar Bergerak Di Blog

Cara Membuat Recent Post Gambar Bergerak Di Blog

Cara Membuat Recent Post Gambar Bergerak Di Blog - Recent post adalah artikel posting yang paling terbaru dalam suatu blog. Jadi pengunjung bisa lihat postingan terbaru dari kita, Adapun artikel posting yang di tampilkan biasanya berupa judul saja dari artikel maupun ada sedikit isi keterangan dari artikel yang kita posting, namun hal itu bisa dirubah sesuai dengan keinginan kita. Berikut gambar Recent Post yang akan kita pasang :

Pada recent post seperti gambar diatas dilengkapi dengan Efek marquee atau slide berjalan dan gambar foto dengan judul postingan dengan bergerak slide kebawah. Sobat bisa melihatnya pada Recent Post Bergerak pada slide samping kanan pada blog Software Mania PC ini. script ini saya dapatkan di google.com untuk sumbernya Cara Membuat Recent Post Gambar Bergerak Di Blog.

Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog ini, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

Cara Membuat Recent Post Gambar Bergerak Di Blog

• Masuk akun blog sobat
• Pilih Tata Letak
• Lalu Tambahkan Gadge pilih HTML/JavaScript
• Masukan kode di bawah ini kedalam kotak HTML/JavaScript :

<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;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:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</ul>
</div>

Keterangan :

• kode yang warna Merah adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu sobat bisa ubah kecepatannya..
• kode yang warna Biru adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
• kode yang warna Hijau adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati.

Semuanya sudah saya coba dan berhasil, hehe sekarang gentian sobat untuk mencobanya. Sekian dulu Cara Membuat Recent Post Gambar Bergerak Di Blog. Jika sobat bingung bisa tinggalkan komentar dan tunggu jawabannya. Ok salam blogger dan good luck

Eitz,,,, ada yang kelupaan kemarin kang zain share Cara Membuat Kotak Komentar Blog di Bawah Postingan lebih lengkapnya lihat DISINI untuk membuat box komentar dengan mudah.

Cara Membuat Recent Post Gambar Bergerak Di Blog