Slider Popular Post Pada Blog

Tweet

Banyak kita jumpai dalam dunia blog ataupun website yang menggunakan animasi slider pada entri populer atau banyak yang bilang Popular Post. Pada tutorial sebelumnya pernah Kang Fathur bahas juga tentang penggunaan artikel terpopuler yang sering dibaca oleh pengunjung.

Animasi ini saya dapatkan pada blognya bos Abu Farhan, hanya saja saya modifikasi sesuai dengan kemauan saya. Minat untk menggunkannya diblog anda?

Anda bisa lihat pada gambar berikut, betapa variatifnya modifikasi yang Kang Fathur terapkan pada widget tersebut.

Live Demo

Jika berminat, ikuti langkahnya :

• Login Blogger anda;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;

<style>.theme-orman.slider-wrapper{background:#FFF;border:1px solid #3D85C6;height:250px;margin:0px auto;position:relative}.theme-orman .nivoSlider{position:relative;width:460px;height:250px;margin-left:0px;background:url(http://mail.yimg.com/ok/u/assets/img/spinner-32x32-anim.gif) no-repeat 50% 50%}.theme-orman .nivoSlider img{position:absolute;top:0px;left:0px;display:none;width:460px;height:250px}.theme-orman .nivoSlider a{border:0;display:block}.theme-orman .nivo-controlNav{display:none}.theme-orman .nivo-directionNav a{display:block;width:25px;height:250px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HwP0SEAhWYU7435KRCCxcgUw4AwKQmvGQ7tkgvF0-42eAgtpDMc7ZmkLqJzEtpVUJ3b9KAU0s9bTg38rEVNftQYwuLCJfB8-Vpqyc5ljsVJaQxB2z3JsLbr2xj6BoSZClAnfy-54aqaO/s1600/arrows.png) no-repeat 0% 50%;text-indent:-9999px;border:0;top:40px}.theme-orman a.nivo-nextNav{background-position:100% 50%;right:0px;padding-right:0px}.theme-orman a.nivo-prevNav{left:0px;padding-left:0px}.theme-orman .nivo-caption{font-family:Helvetica,Arial,sans-serif}.theme-orman .nivo-caption a{color:#fff;border-bottom:1px dotted #fff}.theme-orman .nivo-caption a:hover{color:#fff}.theme-orman .ribbon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpsHaCbZsbr_V40Lk6gDorKi4IMdIICtm39SWgaNI5TpcHjcZGGHqLFPl1D8IA1f3_SgEIevwqepkBruqyMMbTK-DIVX3ZAo8EyfUCywwllNbr4D3rmqwIJWdGlh9tvtHleYoR99LIiZX_/s1600/ribbon_karaks.png) no-repeat;width:111px;height:111px;position:absolute;top:-3px;left:-3px;z-index:300}.nivoSlider{position:relative}.nivoSlider img{position:absolute;top:0px;left:0px}.nivoSlider a.nivo-imageLink{position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}.nivo-slice{display:block;position:absolute;z-index:5;height:100%}.nivo-box{display:block;position:absolute;z-index:5}.nivo-caption{position:absolute;left:0px;bottom:0px;background:#9fc5e8;color:#00F;opacity:0.8;width:100%;z-index:8;font-weight:bold}.nivo-caption p{padding:5px;margin:0}.nivo-caption a{display:inline !important}.nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}.nivo-prevNav{left:0px}.nivo-nextNav{right:0px}.nivo-controlNav a{position:relative;z-index:9;cursor:pointer}.nivo-controlNav a.active{font-weight:bold}.theme-default #slider{margin:100px auto 50px auto;width:290px;height:200px}.theme-pascal.slider-wrapper,.theme-orman.slider-wrapper{}.clear{clear:both}<style>

• Tambahkan JavaSCRIPT ini sesudah kode diatas

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

• Dan tambahkan kode berikut

<div class="slider-wrapper theme-orman">
<div class="ribbon"></div>
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
var numposts_gal = 6; //number of posts
var image_height =250; //image height
var image_width = 460; //image width
</script>
<script src="http://karak-situbondo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

• Simpan Gadget yang baru dibuat.

Catatan :

1. Seuaikan huruf yang berwarna Merah dengan template anda.
2. Ganti angka "6" jika anda ingin mengubah banyaknya artikel atau postingan yang ditampilkan pada slider ini.
3. Ganti http://karak-situbondo.blogspot.com dengan URL blog anda.

Selamat mencoba...!!!!

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: