Pasang Navigasi Jquery Cantik
Tutorial kali ini Koisine Blog akan membahas tentang navigasi.Navigasi itu adalah bagian penting untuk blog. Mengapa ? Selain itu untuk memperbagus tampilan blog dan juga untuk link dengan tujuan yang berbeda sesuai dengan pembuatnya.
Navigasi yang akan kita bahas yaitu navigasi yang di design oleh Jquery. Jquery sendiri adalah web yang menyediakan fasilitas untuk blog, entah aksesoris blog, navigasi pada blog dan lain-lain fasilitas yang diberikan oleh Jquery itu sendiri.
Banyak sekali bentuk-bentuk navigasi yang pernah kita ketahui sebelumnya, tetapi kebanyakan navigasi yang simpel dan biasa saja, bagaimana selera pemilik blog itu sendiri. Ok saya akan memberikan tutorial lengkap tentang pepmbuatan navigasi Jquery ini.
Sebelumnya contoh Navigasi Jquery bisa dilihat di : Come Here
Bagaimana anda tertarik ?
Tutorialnya !
- Masuk terlebih dahulu ke Blogger,
- Pada menu dasbor pilih Rancangan - Edit HTML - Ceklist -
- Selanjutnya taruh kode di bawah ini di atas ]]></b:skin>
.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(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg);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}#kwick5 a{background-position:-760px 0}#kwick5 a:hover{background-position:-760px -50px!important}#kwick6 a{background-position:-950px 0}#kwick6 a:hover{background-position:-950px -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}
- Kemudian taruh kode di bawah ini tepat di atas kode <head>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/><script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
- Simpan Template
Belum selesai sobat !
Tutorial ke 2 !
- Sobat masuk ke Tata Letak - Tambah Gadget - Pilih Javascript/HTML,
- Copas script di bawah ini dan taruh pada blog kalian,
<div class='kwickswrap'><ul class='kwicks'><li id='kwick1'><a href='#' title='halaman utama'>Home</a></li><li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li><li id='kwick3'><a href='#' title='about'>About</a></li><li id='kwick4'><a href='#' title='futures'>Portfolio</a></li><li id='kwick5'><a href='#' title='contact us'>Contact</a></li><li id='kwick6'><a href='#' title='recomended links'>Resource</a></li></ul></div></td><script type="text/javascript">$().ready(function() {$('.kwicks').kwicks({max : 190,duration: 800,easing: 'easeOutQuint'});});</script>
- Note : Ganti # dengan link sesuai dengan blog kalian
- Simpan.
Selesai, sepertinya sampai di sini dulu tutorial tentang Navigasi Jquery dari Mas Koisine Blog semoga artikel ini bisa bermanfaat bagi kalian semua.
Categories:
jQuery,
panduan blogger
1 komentar:
demonya donk kang ,,, /
Posting Komentar