Membuat Recent Post Thumbnail Bergerak

Recent Post Thumbnail Bergerak -

Recent Post merupakan gadget yang akan menampilkan postingan terbaru pada blog anda, recent post itu sendiri apabila di beri sedikit sentuhan akan menjadi menarik dan enak di pandang. Ada banyak jenis recent post yang di tawarkan sekarang, ada yang hanya muncul tulsian saja, ada kombinasi tulisan dan gambar, ada juga yang di kombinasikan dengan model bergerak.

Kali ini saya akan mebagikan tip membuat recent post thumbnail bergerak, yang artinya recent post akan di tampilkan dengan judul dan gambar yang berukuran thumbnail serta di kombiinasikan gerakan naik turun. Oke kita langsung saja ke langkah langkahnya,

Copy script di bawah ini :

<style type="text/css">

/*widget*/

#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}

#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:normal !important;margin-bottom:5px;font-size:14px;}

#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:60px;border-radius:4px;}

</style>

<!-- start -->

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

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.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 = 7;

var numchars = 0;

</script>

<script src="https://www.namadomainanda.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

Langkah selanjutnya ada buka blog anda, pilih tata letak - tambahkan widget dimana anda mau akan pasang recent post ini. Pilih HTML/Java Script lalu pastekan script di atas pada konten, untuk judul bisa pakai recent post. 

Klik simpan dan selesai, sekarang lihat hasilnya pada blog sobat.

Ket :

Tulisan warna merah ganti dengan jumlah yang ingin di tamilkan

Tulisan warna biru ganti dengan url blog anda.

Sekian tips dan tricks membuat recent post thumbnail bergerak kali ini, semoga bermanfaat dan selamat mencoba.