Image slider atau photo slider atau slider..halah kebanyakan atau -_-", langsung aja deh, image slider memang salah satu upaya untuk mempercantik sebuah desain web atau bahkan untuk menunjang interface pada sebuah tampilan website. Selain mempercantik tampilan, slider juga sekaligus berfungsi sebagai navigasi interaktif sebagai daya tarik visitor untuk mengunjungi konten yang di link dalamimage slider tersebut.
Lalu, bagaimana sih membuat image slider itu? Susah tidak ya?
Emmm...kalau masalah mudah atau tidak itu tergantung kitanya mau belajar atau tidak..hehe! yang jelas kita harus sedikit tahu atau paling tidak mengerti sedikit mengenai bahasa HTML.
Oke deh langsung saja kita praktek membuat image slider untuk dipasang disebuah template blog atau halaman web.
Sebelum dimulai alangkah baiknya Anda melihat image slider yang nanti akan kita buat, lihat preview image slider yang saya terapkan di web saya yang baru, Klik Disini untuk melihat demonya.
Langkah yang pertama yang harus kita lakukan adalah menyiapkan komponen-komponenya.
Lalu, bagaimana sih membuat image slider itu? Susah tidak ya?
Emmm...kalau masalah mudah atau tidak itu tergantung kitanya mau belajar atau tidak..hehe! yang jelas kita harus sedikit tahu atau paling tidak mengerti sedikit mengenai bahasa HTML.
Oke deh langsung saja kita praktek membuat image slider untuk dipasang disebuah template blog atau halaman web.
Sebelum dimulai alangkah baiknya Anda melihat image slider yang nanti akan kita buat, lihat preview image slider yang saya terapkan di web saya yang baru, Klik Disini untuk melihat demonya.
Langkah yang pertama yang harus kita lakukan adalah menyiapkan komponen-komponenya.
- jquery.nivo.slider.js ( plugin javascript dari nivo slider )
- jquery-1.6.1.min.js ( Plugin JQuery )
- CSS
- URL foto yang ingin ditampilkan pada slider
Untuk plugin JQuery dan CSS nya Anda bisa ngelink saja dari web saya, untuk memperpendek penulisan kode. Caranya sebagai berikut :
Taruh kode berikut di antara tag header,
Kemudian taruh kode berikut diantara tag body,
<link rel="stylesheet" href="http://jogja-handycraft.info//slider/style/style.css" type="text/css" />
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://jogja-handycraft.info/slider/jquery.nivo.slider.js"></script>
Kemudian taruh kode berikut diantara tag body,
<div id="slider" class="nivoSlider">
<a href="#"><img src="http://jogja-handycraft.info/slider/images/1.jpg" alt="Jewelry Box Open Side" title="Jewelry Box Open Side" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/2.jpg" alt="Red Jewelry Box" title="Red Jewelry Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/3.jpg" alt="Red Jewelry Oval Box" title="Red Jewelry Oval Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/4.jpg" alt="Pink Beaty Jewelry Box" title="Pink Beaty Jewelry Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/5.jpg" alt="Tray Set Parcel Hari Raya" title="Tray Set Parcel Hari Raya" /></a>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
pauseTime: 5000,
startSlide: 3 }); });
</script>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/1.jpg" alt="Jewelry Box Open Side" title="Jewelry Box Open Side" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/2.jpg" alt="Red Jewelry Box" title="Red Jewelry Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/3.jpg" alt="Red Jewelry Oval Box" title="Red Jewelry Oval Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/4.jpg" alt="Pink Beaty Jewelry Box" title="Pink Beaty Jewelry Box" /></a>
<a href="#"><img src="http://jogja-handycraft.info/slider/images/5.jpg" alt="Tray Set Parcel Hari Raya" title="Tray Set Parcel Hari Raya" /></a>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
pauseTime: 5000,
startSlide: 3 }); });
</script>
Keterangan :
Ganti tulisan yang saya kasih blok warna merah dengan URL tujuan.
Ganti tulisan yang saya kasih blok warna hijau dengan URL gambar.
Ganti tulisan yang saya kasih blok warna kuning dengan Judul dari gambar tersebut.
Simpan, dan lihat hasilnya. Oh iya, slider ini bisa diaplikasikan disemua komponen website ataupun template blog, termasuk pada blogger. Kelebihan dari sider ini selain ringan juga mempunyai slide effect yang indah. So,selamat bereksplorasi.
Ganti tulisan yang saya kasih blok warna merah dengan URL tujuan.
Ganti tulisan yang saya kasih blok warna hijau dengan URL gambar.
Ganti tulisan yang saya kasih blok warna kuning dengan Judul dari gambar tersebut.
Simpan, dan lihat hasilnya. Oh iya, slider ini bisa diaplikasikan disemua komponen website ataupun template blog, termasuk pada blogger. Kelebihan dari sider ini selain ringan juga mempunyai slide effect yang indah. So,selamat bereksplorasi.
8 comments:
Thanks untuk tuts-nya, gan.
Sekalian mau tanya, caranya ubah ukuran gimana ya? Ane udah buka javascriptnya kok jadi ribet ya? Nggak ada pengaturan ukuran.
Mohon dijawab, gan. Terima kasih (lagi) /shakehand
@AnonymousTidak usah mengoatk atik javascriptnya untuk merubah gambar. Cukup edit css nya saja dibagian
#slider-wrapper dan .nivoSlider
Rubah properti width sesuai kebutuhan agan.
Manfaat banget bro.. terus buat posting lagi...
Belum begitu faham, tapi membuat penasaran, masih mengamati dulu, ditunggu postingan lainnya. Thanks
makasih,.,.,.,.,.,.,sip,.,.,.,.,,.,.
kerenn uyy... :-)
Link demo nya mungkin bisa di update gan. Mkasih gan sangat bermanfaat ilmunya.
Agen Bola Online & Casino Online Terpercaya
1 USER ID UNTUK SEMUA PERMAINAN !!!
Casinobet77 Menyediakan Permainan Terbaru & Terbaik
Livecasino | Bolaonline | Sabungayam | PokerDomino | SpadeGaming | SlotGame | Tangkas | BatuGoncang | Jdb168 SlotGame | NumberGame Lottery
-----------------------------------------------------------------------
- Bonus Deposit MEMBER BARU Sportbook 100%
- Bonus Deposit 30% Khusus Permainan Sportbook
- Bonus Deposit 10% Setiap Hari Untuk Semua Game
- Bonus Deposit Setiap hari 5rb - 25rb
- Bonus Casino Rollingan 0.8% Setiap Hari Senin
- Bonus Rollingan Poker & domino 0,3%
- Bonus Cashback Game & Tangkas 5%
- Bonus Cashback Sportbook 5%
- Bonus Cashback Sabungayam 5%
- Bonus Referall 2% Semua Game
- Bonus Referall 1% dari member Togel
Contact Us Now :
?? Livechat Casinobet77
?? whatsapp : +85599495431
?? PIN BBM : D6235F1C
?? Wechat : casinobet77cs1
?? Line : casinobet77
?? skype : casinobet77
?? Link pendaftaran :lc.chat/now/8523001/
Post a Comment