Cara Membuat Menu Navigasi Dengan Jquery

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

.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://roningasinanblog.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://roningasinanblog.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://roningasinanblog.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://roningasinanblog.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.

Related Post:

7 comments:

Download Movies 21 said...

thanks atas infonya,,, Berkunjung balik ya Download Film Gratis | High Quality - Boxsoffice

demak blogger said...

PAGI gan,,, :D

TRIK MEMAKSIMALKAN BLOGSPOT

KabiBitak said...

thanks atas infonya,,, Berkunjung balik ya Bakso Press [ All About CSS, Jquery, Javascript etc ]

S-cool said...

gan ane kebingungan nih,.,,

itu yang tulisan warna biru itu diganti URL atou Judul.,,.

mohon pencerahannya ... >>>

[[scool2012.blogspot.com or jonat49@ymail.com]]

roni said...

Betul sobat,tulisan yang warna biru itu untuk judul dan link warna merah juga tanda pagar merah itu untuk link yang sobat tuju.

abie darmaone said...

kang kasih comment ya di blog ku masih beginner nich...heheh

http://abieyuda.blogspot.com

roni said...

pasti kang roni berkunjung sobat

Post a Comment