Membuat Recent Posts Thumbnails (Postingan Baru Bergambar) Bergulir

Sekarang yang akan kita bahas yaitu cara Membuat Recent Posts Thumbnails (Postingan Baru Bergambar) Bergulir atau saling bergantian dengan jeda yang telah kita tentukan dari script nya, sebenarnya ini hampir sama dengan recent posts lainnya yang kebanyakan orang gunakan namun recent posts ini sangat spesial karena ya itu tadi yang membedakannya recent post ini bisa bergulir dengan sendirinya dan sangat menarik jika di pandang parang pengunjung dan semoga dengan adanya recent posts yang baru ini pengunjung Anda bisa tambah betah dan sering mengunjungi blog atau situs Anda dan untuk menambahkan recent posts ini juga gampang karena ini bisa di tambahkan dari gadget atau dangan cara Tambah Gadget, okey kita akhiri dulu basa-basinya ya,, mari kita mulai membuat Recent Posts Thumbnails yang bergulir, silahkan untuk mengikuti langkah-langkah berikut ini;
1. Login ke Blogger.com

2. Klik Rancangan

3. Di Elemen Laman klik Tambah Gadget

4. Lalu tambahkan HTML/JavaScript dengan cara klik tanda +

5. Masukan script di bawah ini kedalamnnya Lihat Langkah-Langkah Tambah Gadget HTML/Javascript Dengan Gambar  

<style type="text/css">

#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#000000;}
#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:#FF0000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery.min.js?revision=3"></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/Recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

6. Beri judul yang sesuai seperti, Postingan terbaru atau bisa sesuaka Anda

7. Simpan dan lihat perubahannya

Keterangan ;

height:212px untuk mengatur tinggi tampilan

solid 1px #585858 untuk mengatur ukuran border dan warna border (garis pembatas) jika tidak ingin menggunakan border maka tinggal ganti nilai 1px dengan 0px

background-color:#2f2f2f untuk mengatur warna latar belakang tampilan

a{color:#FF0000;} untuk mengatur warna judul postingan 

font-size:12px untuk mengatur ukuran huruf judul postingan

font-size:11px untuk mengatur ukuran huruf isi postingan

color:#DEDEDE untuk mengatur warna huruf

var speed = 1500 untuk mengatur kecepatan ketika sedang bergulir

var pause = 3500 untuk mengatus lama ditampilkannya sekaligus jeda bergulirnya iklan yang lain

var numposts = 5 untuk mengatur banyaknya postingan terbaru yang akan ditampilkan

var numchars = 100 untuk mengatur banyaknya teks yang di potong untuk di tampilkan

Berikut hasil tampilan dari script yang telah di buat