Cara Membuat Auto Slide Artikel terbaru di Blog

Cara Membuat Auto Slide Artikel terbaru di Blog
Sepertinya sudah lama saya tidak memberi tutorial blogger. Nah, kali ini saya akan mencoba memberi satu widget lagi kepada blogger yaitu auto slide untuk recent post atau artikel terbaru. Tidak ada yang istimewa dari widget ini namun dengan widget ini sobat bisa memperindah tampilan blog sobat karena seperti postingan saya sebelumnya tentang Meningkatkan traffic blog salah satunya adalah dengan membuat desain blog menarik sehingga pengunjung tidak merasa bosan membaca informasi yang kita sediakan.
Untuk demo bisa sobat lihat diblog demo ini dibagian sidebarnya.

<<--DEMO-->>

Jika sudah, langsung saja kita ke tutorialnya membuat auto slide artikel terbaru/recent post di sidebar blog.

1. masuk ke blogger

2. Pilih tata letak

3. Add gadget pada sidebar blog anda

4. Pilih HTML/Java script 

5. Masukan kode dibawah ini :

<style type="text/css"> #rp_plus_img{height:385px;overflow:hidden;border:0;padding:2px 3px 3px 2px;background:transparant} #rp_plus_img ul{list-style-type:none;margin:0;padding:0} #rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;-moz-border-radius: 10px; border-radius: 5px;background:#ffffff} #rp_plus_img li:hover{background-color: #EFFBEF;} #rp_plus_img a{color:#d90000;font-weight:bold} #rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;} #rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;-moz-border-radius: 10px; border-radius: 5px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.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 = 20; var numchars = 40; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul>

Keterangan :

#ffffff; Warna background
#EFFBEF; Warna background saat disorot kursor

 #d90000; Warna Judul Postingan Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML var numposts = 20; Jumlah postingan yang akan di tampilkan var numchars = 40; Jumlah character/huruf yang akan di tampilkan
speed : Untuk mengatur kecepatan slide, (atur sendiri sesuai selera anda).

Oke, sampai disitu saja artikel mengenai cara membuat auto slide artikel terbaru di blog, semoga bermanfaat karena ini mudah di praktekan.

Share this post