Rounded Content Slider With Jquery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Assalamualaikum Wr. Wb.

Jquery Rounded Content Slider. Dari namanya saja kita sudah tertarik. Berawal dari iseng-iseng blogwalking, tidak sengaja saya menemukan sebuah website yang sangat keren. Authornya orang indonesia, Mas Abu Farhan. Disana saya menemukan script dari content slider ini. Terima Kasih sebelumnya buat mas Abu Farhan, atas ilmunya. Rounded Content Slider bisa teman-teman sekalian lihat di bagian atas tepat dibawah menu navigasi utama (gambar yang muter2, hehe...).

Oke langsung Saja. Ikuti petunjuk dibawah ini,

1. Penerapan Style CSS

1. Login ke Blogger Dashboard, kemudian pilih Layout > Edit Html
2. Jangan centang checkbox ‘Expand Widget Templates’
3. Temukan Kode Dibawah ini

]]></b:skin>

4. Copykan script dibawah tepat diatas kode ]]></b:skin>

/* START

--------------------------------------------------------------------

Script By http://www.abu-farhan.com

--------------------------------------------------------------------

Roundabout

*/

#featured {margin:10px 0 30px 0;}

#folio_scroller_container {margin-top:35px; margin-bottom:40px; height:auto;}

#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}

.roundabout-holder {list-style:none; width:400px; height:250px; margin:0px auto;}

.roundabout-moveable-item {font-size:12px!important;

/* Ukuran Gambar*/

height:180px;

width:350px;

/*-------------*/

cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}

.roundabout-moveable-item img {height:100%; width:100%; background-color:#FFFFFF; margin:0;}

.roundabout-in-focus {cursor:auto;}

.roundabout-in-focus:hover {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}

.roundabout-holder span {display:none; font-size:12px;}

.roundabout-in-focus:hover span {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }

.roundabout a:active,

.roundabout a:focus,

.roundabout a:visited {outline:none; text-decoration:none;}

.roundabou li {margin:0}

a img {border:none; outline:0;}



/* END

--------------------------------------------------------------------

Script By http://www.abu-farhan.com

--------------------------------------------------------------------

Roundabout

*/

Pada Ukuran Gambar, anda bisa merubah sesuai kebutuhan.

2. Penerapan Javascript

Temukan Kode Berikut

]]></b:skin>

Masukan script di bawah tepat diatas kode tadi

<!-- jQuery -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

<script src="https://sites.google.com/site/remajateknologi/dhe/dhe-jquery.roundabout.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

var interval;

$('#featured ul')

.roundabout({

duration: 600 }

)

.hover(

function() {

// oh no, it's the cops!

clearInterval(interval);

},

function() {

// false alarm: PARTY!

interval = startAutoPlay();

}

);

// let's get this party started

interval = startAutoPlay();

});

function startAutoPlay() {

return setInterval(function() {

jQuery('#featured ul').roundabout_animateToNextChild();

}, 5000);

}

</script>

Kode 5000 adalah interval waktu slider,, bisa diubah sesuai kebutuhan. Kode yang saya beri warna merah, dapat dihapus apabila blog anda sudah mempunyai Jquery.

3. Penerapan Widget

1. Design -> Click on “Add a Gadget” -> HTML/JavaScript type.

<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">

var numposts_gal = 6;

var random_posts = false;

</script>

<script src="http://remajateknologi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Keterangan

var numposts_gal = 6 , adalah kode berapa banyak posting yang ingin ditampilkan dalam slider.
var random_posts = false; adalah kode yang menyatakan posting yang akan ditampilkan secara acak atau tidak. Deafultnya false, dapat diubah true apabila ingin menampilkan secara acak.

Ubah alamat http://remajateknologi.blogspot.com menjadi alamat blog anda. Agar postingan pada blog anda dapat terindeks oleh script.

Bagaimana, mudah kan teman-teman ? Apabila ada pertanyaan tentang Jquery Rounded Content Slider silahkan komentar dibawah, insyaallah saya akan bantu sesuai kapasitas dan kemampuan saya. Terima Kasih atas partisipasi teman-teman. Sering-sering mampir ya, sampai jumpa lagi di posting berikutnya.

By : Catatan Si Culun – Adhe Setiawan