Cara Membuat Menu Navigasi Dengan Jquery
Assalamu'alaikum sobat blogger semua and selamat menunaikan ibadah
puasa,Untuk tutorial kali ini kang Roni masih membahas tentang menu
blog,meski sebelumnya kang Roni telah membahas cara membuat menu Navigasi Dropdown Horizontal dan juga Menu Horizontal dengan CSS dan HTML
untuk mempercantik blog,kali ini kang Roni akan mengajak sobat semua
untuk mempelajari Cara Membuat Menu Navigasi Dengan Jquery dan bila
sobat nanti tertarik dengan menu ala Jquery ini sobat boleh pasang tu
menu diblog sobat.Oke langsung aja kita test sedikit kecerdasan kita
denga kode kode Menu Navigasi Jquery.
Langkah-langkah Membuat Menu Navigasi Dengan Jquery
1.Login Blogger.com
2.Klik Rancangan -->Edit HTML
3.Download Template Lengkap untuk keamanan.
4.Centang kotak Expand Template Widget
5.Cari kode ]]></b:skin>
Kemudian taruh kode berikut tepat di atasnya
6.Selanjutnya cari kode <head>
Kemudian taruh kode berikut tepat di atasnya
7.Simpan template
8.Sobat kembali lagi ke Rancangan -> AddGadget/Tambah Gadget -> HTML/JavaScript,kemudian masukkan kode berikut kedalamnya.
Keterangan
Untuk tulisan dengan warna merah sobat ganti dengan link tujuan sobat dan warna biru itu adalah judul untuk link tujuan sobat.Oke kalo sobat tertarik langsung aja Buat Menu Navigasi Dengan Jquery di blog keren sobat.
Langkah-langkah Membuat Menu Navigasi Dengan Jquery
1.Login Blogger.com
2.Klik Rancangan -->Edit HTML
3.Download Template Lengkap untuk keamanan.
4.Centang kotak Expand Template Widget
5.Cari kode ]]></b:skin>
Kemudian taruh kode berikut tepat di atasnya
.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
}
6.Selanjutnya cari kode <head>
Kemudian taruh kode berikut tepat di atasnya
<script src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script
src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js'
type='text/javascript'/>
<script src='http://roningasinanblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
7.Simpan template
8.Sobat kembali lagi ke Rancangan -> AddGadget/Tambah Gadget -> HTML/JavaScript,kemudian masukkan kode berikut kedalamnya.
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://vikitctc.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://vikitctc.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://vikitctc.blogspot.com/' 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='http://vikitctc.blogspot.com/' title='recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>
Keterangan
Untuk tulisan dengan warna merah sobat ganti dengan link tujuan sobat dan warna biru itu adalah judul untuk link tujuan sobat.Oke kalo sobat tertarik langsung aja Buat Menu Navigasi Dengan Jquery di blog keren sobat.
Semoga artikel Cara Membuat Menu Navigasi Dengan Jquery bermanfaat bagi Anda.
