Saturday , 27 May 2017
Home » Uncategorized » Cara Membuat Slider dengan JQuery

Cara Membuat Slider dengan JQuery

Sebenernya tulisan tentang membuat slider diatas header ini sudah lama saya buat, sekitar dua tahun yang lalu ketika menerapkan untuk salah satu blog di kantor saya, hasil nya lumayan bagus, sayangnya pengelola widget blog ini sekarang menerapkan sistem berbayar. kita tau kan, kalo pada males bayar, hehehe
Btw walau sudah 2 tahun, tapi masih bisa digunakan atau di terapkan di blog.

Pertama kita login ke blog, bila anda belum memiiki blog,silahkan baca artikel Cara membuat blog supaya semangat membuat blog. Langkah selanjutnya
1. kopi kode berikut diatas kode

/*Start Slider Css*/ /* * jQuery Slider v2.6 * http://way-kambas.blogspot.com * * Copyright 2012, Raffa bintang * http://www.way-kambas.blogspot.com * March 2012 */ /* The Slider styles */ #slider{ width:970px; height:270px; } .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .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; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3…) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } /* Skin Name: Raffa Skin URI: http://way-kambas.blogspot.com Skin Type: fixed Description: A nice, light skin for way kambas slider. Author: raffa Author URI: http://way-kambas.blogspot.com */ .theme-pascal.slider-wrapper { background:url(http://2.bp.blogspot.com/-KcfTsWng9Js/T9HNbCAgugI/AAAAAAAAAW0/G8FADX-lHXM/s1600/slidernivo1.png) no-repeat; width:970px; height:270px; margin:0 auto; padding-top:0px; position:relative; } .theme-pascal .nivoSlider { position:relative; width:970px; height:270px; margin-left:19px; background:url(http://4.bp.blogspot.com/-q9aJRd_k5RQ/Tjaqy4XX5OI/AAAAAAAAE3E/Y32S6GBDjso/s1600/loading.gif) no-repeat 50% 50%; } .theme-pascal .nivoSlider img { position:absolute; top:0px; left:0px; display:none; width:970px; /* Make sure your images are the same size */ height:270px; /* Make sure your images are the same size */ } .theme-pascal .nivoSlider a { border:0; display:block; } .theme-pascal .nivo-controlNav { background:transparent; width:251px; height:40px; position:absolute; left:200px; /* Tweak this to center bullets */ bottom:-42px; padding:8px 0 0 82px; z-index:20; } .theme-pascal .nivo-controlNav a { display:block; width:22px; height:22px; background:url(http://2.bp.blogspot.com/-roNkMPuTzA0/Tjaqxid76eI/AAAAAAAAE24/i-Q9G-YMd8c/s1600/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .theme-pascal .nivo-controlNav a.active { background-position:0 -22px; } .theme-pascal .nivo-directionNav a { display:none; } .theme-pascal .nivo-caption { bottom:40%; left:auto; right:0px; width:auto; max-width:970px; overflow:hidden; background:#fff; text-shadow:none; font-family: arial, serif; color:#4c4b4b; } .theme-pascal .nivo-caption p { padding:5px 15px; color:#333; font-weight:bold; font-size:14px; text-transform:uppercase; } .theme-pascal .nivo-caption a { color:#333; font-weight:bold; font-size:14x; text-transform:uppercase; } .theme-pascal .ribbon { background:transparent; width:111px; height:111px; position:absolute; top:-8px; left:-8px; z-index:300; } /*End Slider Css*/

Ganti Kode Warna Orange diatas sesuai dengan Lebar Template anda masing masing

Slider Responsive

2.Kemudian kopi kode berikut diatas kode


catatan : apabila anda sudah memiliki script jquery di dalam template, maka hapus link berwarna merah diatas. Untuk mencari didalam template terdapat script jquery atau tidak, gunakan tombol ctrl+F kemudian ketik JQuery

3.Langkah selanjut nya tinggal memanggil css dan script jquery diatas dengan kode html
Setelah langkah diatas selesai, silahkan save template anda, kemudian masuk ke layout / tata letak, kemudian letakkan kode berikut dalam bentuk html/javascript

Selesai, Sangat mudah bukan?  demikian tutorial cara membuat slider dengan jquery
Semoga bermanfaat dan nivo slider ini bisa mempercantik blog teman teman semua, amin. dan jangan lupa untuk Baca artikel  Optimasi Blog dengan Google Web Master Tools
Salam Bloger

Comments

comments

Free WordPress Themes - Download High-quality Templates

Warning: mkdir() [function.mkdir]: Disk quota exceeded in /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php on line 2305

Fatal error: Uncaught exception 'Exception' with message 'Cache directory not readable/writable: `/home/general8/public_html/wp-content/cache/quick-cache/htmlc/public`. Failed on `/home/general8/public_html/wp-content/cache/quick-cache/htmlc/public/www-general-web-id/9/7/8/0/f`.' in /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php:2310 Stack trace: #0 /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php(456): websharks\html_compressor\core->cache_dir('public', '9780f9295a07f05...') #1 /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php(398): websharks\html_compressor\core->compile_css_tag_frags_into_parts(Array) #2 /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php(317): websharks\html_compressor\core->maybe_compress_combine_head_body_css('<!DOCTYPE html>...') #3 /home/general8/p in /home/general8/public_html/wp-content/plugins/quick-cache-pro/submodules/htmlc/html-compressor/includes/core.php on line 2310