Home » » Menu Horizontal Kwicks JQuery Slide

Menu Horizontal Kwicks JQuery Slide

Sebelum Tutorial ini kami sudah membahas Cara Membuat Menu Mega JQuery dan CSS. Sekang berbeda kami disini akan memberikan sebuah cara atau trik yang berhubungan dengan Menu Blog. Kami disini mempunya koleksi dan Kumpulan Menu Horizontal dan Vertikal Terlengkap. Nah Mari kita simak bersama-sama Cara Membuat Menu Horizontal Kwicks JQuery Slide.



Langkah 1
Letakkan Kode CSS dibawah ini Tepat diatasnya 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
}


Langkah 2
Kemudian Masukkan dan letakkan kode JQuery dibawah ini tepat dibawahnya kode ]]></b:skin>


<script class='jsbin' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>


Langkah 3
Simpan perubahan template anda kalau sudah proses pemasangan Kode diatas selesai

Langkah 4
Masuk ke Menu Design atau Rancangan. Setelah itu Tambahkan Gadget HTML/JavaScript, Lalu masukkan kode dibawah ini.


<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://lora-malunk.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://lora-malunk.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://lora-malunk.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://lora-malunk.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>



Langkah 5
Simpan Template anda dan lihat hasilnya
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

nice !

Terimakasih RISALAHATI™ atas Komentarnya di Menu Horizontal Kwicks JQuery Slide

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger