Membuat Slideshow Headline News Blog

Pada postingan kali ini saya akan membahas tentang cara membuat Slideshow Headline News pada Blog. Memang sudah banyak blogger yang membahas tema yang satu ini. Menampilkan Headline News pada blog terbukti cukup membantu dalam meningkatkan jumlah traffic pada blog.

Headline News dengan teks berjalan itu sudah umum dijumpai di blog yang mungkin sempat sobat kunjungi, namun kali ini Headline News tidak hanya berupa teks, tetapi juga disertai gambar dan uraian singkat tentang postingan blog sobat. Selain itu dikemas dalam bentuk Slideshow yang membuat tampilannya lebih menarik.

Sekalipun dilengkapi gambar, widget ini tidak terlalu berpengaruh terhadap loading blog. Hal ini disebabkan gambar tersebut berukuran mini. Oke,,, silakan copy kode di bawah ini, kemudian letakkan pada tempat yang sobat suka. Seperti biasa, login dulu ke Blogger, langsung menuju Layout/Tata letak. Silahkan tambahkan Gadget, pilih HTML/Javascript, kemudian letakkan pada posisi yang diinginkan.

<style type="text/css">
#rp_plus_img{height:130px;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}
#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="https://googledrive.com/host/0B12wbnW3X8djSlBLNGlGWHVKeGM"></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 = 60;
var numchars = 100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Kode yang ditandai dengan warna merah dapat diganti sesuai dengan keinginan. Angka 1500 adalah kecepatan slideshow, angka 20 adalah jumlah postingan yang akan ditampilkan pada Headline News Slideshow, dan angka 60 adalah jumlah huruf yang akan ditampilkan pada uraian singkat postingan. Selamat mencoba!! Good Luck!