8:39 AM
Hzndi
Pada pagi hari tadi saya membagikan bagaimana caranya membuat postingan seperti koran. Namun pada tutorial kali ini saya akan memberi tahu tentang membuat menu slider dengan Jquery. Saya juga mengucapkan terimakasih kepada Mr. jeremy yang sudah membuat scriptnya bisa kamu lihat disini http://www.jeremymartin.name/examples/kwicks.php?example=1. lalu bagaimana kah cara membuatnya ? perhatika langkah2 dibawah ini :
1. Masuk ke Akun Blogger
2. Klik Rancangan - Edit HTML dan Centang Expand Template Widget, kemudian kamu copas kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> (Gunakan ctrl + f untuk mencari kode ]]></b:skin> di dalam CSS Editor blog kamu).
.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslzj3SjbGvcQYuOVgcLOPh1fr4J_t4bljgP6DIjU5QUddxsn_2NGHcBC1PkppAzZwo3-FVRJ5epKGVae3kfDMWURv4MZ_tyeiOBAUdRg9LDOIgIUXQdPDul7wMJvEPs0dfC4O0Xoj4R76/s1600/menuslidejquery.png
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjslzj3SjbGvcQYuOVgcLOPh1fr4J_t4bljgP6DIjU5QUddxsn_2NGHcBC1PkppAzZwo3-FVRJ5epKGVae3kfDMWURv4MZ_tyeiOBAUdRg9LDOIgIUXQdPDul7wMJvEPs0dfC4O0Xoj4R76/s1600/menuslidejquery.png
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
3. Selanjutnya, kamu cari kode <head> dan letakan kode2 dibawah ini diatas kode <head>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery-1.2.3.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.easing.1.3.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://hzndi.googlecode.com/files/hzndi.blogspot.com-menuslidejquery.easing.1.3.js' type='text/javascript'/>
4. Simpan Template.
5. Kemudian beralih ke Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascrpit dan masukan kode CSS berikut kedalam HTML/Javascript Editor.
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://hzndi.blogspot.com/' title='Beranda Hzndi'>Home</a></li>
<li id='kwick2'><a href='http://hzndi.blogspot.com/' title='Email Me'>Contact</a></li>
<li id='kwick3'><a href='http://hzndi.blogspot.com/' title='Tentang Saya'>About Me</a></li>
<li id='kwick4'><a href='http://hzndi.blogspot.com/' title='Link Exchange'>Link</a></li>
</ul>
</div>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
<ul class='kwicks'>
<li id='kwick1'><a href='http://hzndi.blogspot.com/' title='Beranda Hzndi'>Home</a></li>
<li id='kwick2'><a href='http://hzndi.blogspot.com/' title='Email Me'>Contact</a></li>
<li id='kwick3'><a href='http://hzndi.blogspot.com/' title='Tentang Saya'>About Me</a></li>
<li id='kwick4'><a href='http://hzndi.blogspot.com/' title='Link Exchange'>Link</a></li>
</ul>
</div>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
6. Simpan Template dan lihat hasilnya :D
Sumber Kode : Kwicks for jQuery (version 1.5.1) by Jeremy Martin, jQuery Easing v1.3 by gsgd.co.uk
Postingan Terkait:
Posted in: Blogger
pasti animasinya bagus nih, coba dulu sob....
ReplyDeleteoke sob dicoba saja :D
ReplyDeleteWah ok juga nih....izin copy scriptnya ya....kapan2 ane mau pake gampang....
ReplyDeleteini sama kyak yang di blog saya ya??
ReplyDeletesimpleblog4.blogspot.com
sebelah kiri
@pradika : beda sob
ReplyDelete@pasar herbal : oke sob sama2 :D