Cara membuat Slider

Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share mengenai slider. Perbedaan slideshow dengan Slider yaitu Kalau slideshow bekerja secara otomatis, sedang slider yang akan saya bahas yaitu slider bergerak kesamping kanan atau kiri apa bila kita mengklik tombol yang ada di sisi kanan dan kiri slider tersebut.

Contoh 1  Gambar slider seperti ini :

Contoh 2  Gambar slider seperti ini :

LIHAT DEMO CONTOH 1

LIHAT DEMo CONTOH 2

Bila anda berminat, silahkan anda ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head> 

Untuk slider contoh 1 :

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 850px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4tGLkEfahL2iYcFYdXm8i_rrG4kNYBMoiwD0HIX6CWuUOHHIpbuCENYCTHZw6_60a5Ec_kMVpeIzUmQ2fHYUz8BrhhT1KCDWcx3c80gAy1bmXyfzLkvJmvQh02gLuAKzUGZPx3WVKJuy/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4tGLkEfahL2iYcFYdXm8i_rrG4kNYBMoiwD0HIX6CWuUOHHIpbuCENYCTHZw6_60a5Ec_kMVpeIzUmQ2fHYUz8BrhhT1KCDWcx3c80gAy1bmXyfzLkvJmvQh02gLuAKzUGZPx3WVKJuy/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:254px;width:250px;} </style>

Untuk slider contoh 2 :

<script src="http://bnote.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;border:2px solid #5d5d5d; background-color:#aaa;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:10 10px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {-moz-border-radius: 5px;width: 840px;height: 100px;margin: 0 auto;padding:10px;border:2px solid #fff; background-color:#bbb;} .jcarousel-skin-tango .jcarousel-item {width: 100px;height: 110px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0; cursor:pointer; height:25px; right:0px; position:absolute; width:25px; top: 50%; } .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0; cursor:pointer; height:25px; left:5px; position:absolute; width:25px; top: 50%; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 100;display: none;} .jcarousel-prev {z-index: 100;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:100px;width:100px;} </style>

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.

Langkah selanjutnya :
4. Simpan  template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='Ulr dokumen 1'><img src='Ulr gambar 1'/></a></li>
<li><a href='Ulr dokumen 2'><img src='Ulr gambar 2'/></a></li>
<li><a href='Ulr dokumen 3'><img src='Ulr gambar 3'/></a></li>
<li><a href='Ulr dokumen 4'><img src='Ulr gambar 4'/></a></li>
<li><a href='Ulr dokumen 5'><img src='Ulr gambar 5'/></a></li>
</ul>
</div>

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FhpAzUKF047VMY_DdpQ9_t3jFdUrgZXZBMQTQm4mpdXWqtzo-V9l0M5LGKphvyqQ_J1d5yt3YKOWN1tmIkGJQZD2h6vN0JP4JZvkyVk8UOeBNBqzo4wdCpMWcihnAZy59ybW-R42dL3x/s1600/Business+Company+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNkvbltraiMVWSTTDhF6S0EsyN_HQ2BsRqCzFxr4yLTWwKga3YEgs3hiWxnzGxTHapcnf-98yBi-jf-KoNaNR8Pbfmh678XRuaQQJmYcQ80iUU_sb7pz9OHE-TS9u-vc-CkJSym3vSTVqw/s1600/Incorporate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gA-IKC9JjqYztJ1-ZhI2qlJ099mY2erMPv1r-DTxfyLkxU7nI72uFiYMMavc3rLm5BIpbVx2eW8jpnRUZqRqyMTKgvX4z1UkgjZ1JnAh-Z2aqSksUzmUI1OUNIhtuP0JDdWYble57en8/s1600/Business+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCJLm-vkGS93QnqF3udElpw7PgCFrOXxTtU-54cK1K3OvlkNqkgxKitDeJRAyl6HxOpyXQNbJYRjv4CMPOK7y2xji7SLovTeClomh2wzJ4NMKTyTcRNqpDvj8qx7lZnyx3sJgw4u945ZB/s1600/Dominate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLE7eEzBUKRm1sO4OZS4uJVCg9sYpaldYwMkTJoN4Oq634_Hvlnj1GO_wlFcnqaq9Gx_N4JP48XDz0yet5C83ScoPAuA0Uwhr7sAGEuTG7_ROB_EHRgsixnt_WxB6m99Y80s0cCo-JRz-Z/s1600/Business+Corp+Blogger+Template-1.jpg'/></a></li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhWhG66IAiHThsW139PC_Mn1I9lppBAN-FiaxxnmkcHnlHfUN4GqI5yK_OCHg6gK7Sthy_w6nJP0rJGPzkhMNM5eG2Q8jRLgtUfL5dY1kW0L71lzK6HT9KStBjGmkTx8OmJwdN7p6zJ3o/s1600/Business+View+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiazzrXssl6Y1mC0XsPf0ms5lhkiWzRXD5oxAdRy6RJmFovYt5gjjm5U0ieyt-LM7x6EuvoEnzl5CjNboABzsHi-rGuTKj8_jmUCXj4gP1M1AHihp0noV_VPa3YBpA8bhBPpR8zyDDeuA07/s1600/Glorius+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWOKomAaoAEZ9zS6OyvfLzhH37N9amsB-W7Ummzi0RbBdWn4jlNKdHZoDU03zort1AZSL4SveTcTdpctAsOuZsrRnvgcazHimPrEnYIZQqFNmtG55kziFBqv0YPjzrVidhaXXEQjFl9zQ/s1600/iFinance+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgopz-Q73v9thwy0h-ifqKCVJTcMnDGsISYf0FLjLK9VjihpQSiJPhkd_jFnpeddTocIATWe4uT0Zl-UFIM61cAztDBvOOday-bYc2wkCrrtThDS5F2xSCSKLo9-dFWUvGvzXcUuDyNcm/s1600/Company+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgWgit7X4efoc3efmf914zkAKKn59FCNJ2chOZCwIVQFPjVPi0Cm4Z6rCIsjc_7ziG-CB6ox2vOrEL-YIRYQX80inLy8AqYCrstcfhs5J4mWPyIrddCDEcPOc7TG0QKf8CPyceAqEUlIOY/s1600/Business+Top+Blogger+Template-1.jpg'/></a>
</li>
</ul>
</div>

 
8. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Cara membuat Slider; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS BOX dan FungsinyaFitur Css Box digunakan pada saat kita membuat desain web termasuk mengatur tata letaknya. Css Box pada dasarnya adalah sebuah kotak yang membungkus elemen HTML, da ... readmore
• Cara membuat Text-Shadow Update lagi cara membuat Text-Shadow. Banyak cara membuat variasi tampilan pada web ataupun blog kita, diantaranya kita bisa memberikan efek shadow pada teks. Pe ... readmore
• CSS Gradient background GeneratorPada posting sebelumnya saya membahas tenntang CSS3 Generator, dan kali ini saya akan membahas tentang CSS Gradient Background Generator (Warna Gradient) yaitu sebu ... readmore
• Cara membuat textarea dengan tombol "select all"Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk men ... readmore
• CSS BORDERBanyak sekali properti dari fitur css border, yang semuanya berfungsi mengatur tampilan gaya dan warna dari sebuah border. Berikut beberapa properti dari fitur css ... readmore