Kwick Menu Navigasi Blogger dengan jQuery

Kali ini saya akan memberikan tutorial tentang cara membuat Menu navigasi jQuery di Blogger. Tau ng gan menu jQuery seperti apa??...

Demo atau contoh dari Menu Navigasi kwicks jQuery ini sobat dapat lihat di:
/

Kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran, yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
Pertama
1#
Pilih Rancangan (Gbr.1),lalu Tata Letak (Gbr.2) kemudian contreng tulisan Expands Widget Templates (Gbr.3).

[Gbr.1]

[Gbr.2]

[Gbr.3]

Selanjutnya cari kode ]]></b:skin> (Search: Pncet ctrl + f), setelah ketemu tinggal letakkan kode CSS dibawah tepat diatas kode ]]></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
}

Keamudian cari kode <head>, setelah ketemu letakkan kode jQuery dibawah tepat diatasnya:

<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'/>

Lalu simpan Templates sobat...

Pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget [Gbr.4]

[Gbr.4]

[Gbr.5]

Selanjutnya pilih HTML/Javascript lihat [Gbr.5], kemudian letakkan kode berikut:

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://pelajaran-blog.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pelajaran-blog.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' 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://pelajaran-blog.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>