Membuat Slider Menu Image

السّلام عليكم بسم الله الرّحمن الرّحيم

Sebelumnya saya sudah pernah membahas cara membuat slider menu, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan.
Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.
Silahkan Login Blogger dengan ID anda.
Langsung menuju ke Edit HTML
Tambahkan kode berikut ini setelah kode ]]></b:skin>

<script src='http://deddycamp.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script src='http://deddycamp.googlecode.com/files/jquery.scrollTo.js.txt' type='text/javascript'/>
<style type='text/css'>
#slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
#slider a:link, #slider a:active {color:#FFF;text-decoration:none}
#slider a:hover {color:#F00}
#mask-gallery {overflow: hidden}
#gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
#gallery li {float:left;padding:0px;margin:0px}
#mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}
</style>
<script>
$(document).ready(function() { var speed = 5000;
$(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
$(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
$(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());
var run = setInterval(&#39;newsscoller(0)&#39;, speed);
$(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);
$(&#39;#btn-pause&#39;).click(function () {
clearInterval(run);
return false;
});
$(&#39;#btn-play&#39;).click(function () {
run = setInterval(&#39;newsscoller(0)&#39;, speed);
return false;
});
$(&#39;#btn-next&#39;).click(function () {
newsscoller(0);
return false;
});
$(&#39;#btn-prev&#39;).click(function () {
newsscoller(1);
return false;
});
$(&#39;#slider&#39;).hover(
function() {
clearInterval(run);
},
function() {
run = setInterval(&#39;newsscoller(0)&#39;, speed);
}
);
});
function newsscoller(prev) {
var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);
if (prev) {
var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);
} else {
var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
}
$(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
next_image.addClass(&#39;selected&#39;);
next_excerpt.addClass(&#39;selected&#39;);
$(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
$(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);
}
</script>

Simpan Template.
Keterangan
var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar anda.

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget > pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-menu-tab-view.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>
<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-navigasi-header-di-blog.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>
<li><a href="http://www.deddycamp.com/2010/05/cara-membuat-tab-view-versi-2.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>
</ul>
</div>
</div>
<div id="buttons">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-pause">pause</a>
<a href="#" id="btn-next">next</a>
<a href="#" id="btn-play">play</a>
</div>

Kemudian Simpan.
Keterangan :
1. Kode yang berwarna merah adalah url yang akan di tuju.
2. Kode yang berwarna biru adalah url dari gambar.

Selamat mencoba.

 

Sekian uraian dari saya,
semoga bermanfaat

والسّلام  

Posted by Kang Syahid on Rabu, 23 April 2014 - Rating: 4.5

Title : Membuat Slider Menu Image
Description : السّلام عليكم بسم الله الرّحمن الرّحيم Sebelumnya saya sudah pernah membahas cara membuat slider menu , kali ini saya akan c...

Tweet