Cara membuat menu navigasi kwick pada blog


Ga asing bagi blogger yang infonya pada terupdate tentang modif blog dan tutorialnya.
Bagi yang blom tau, coba menu navigasi kwick ney, keren ko...
sumpaa ヽ(ヅ)ノ
1. Login blog
2. Template
3. Letakkan kode css berikut 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}
4. Kemudian letakkan kode script jquery di atas </head>
<script src='http://mig33eaglemenu.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://mig33eaglemenu.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://mig33eaglemenu.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;.kwicks&#39;).kwicks({
max : 205,
spacing : 5
});
});
</script>
@hilangkan script jquery berwarna merah jika sobat sudah memasang jquery versi brapapun.

5. Selanjutnya add gadget dan pilih html/javascript dan letakkan kode berikut kemudian simpan
<center><div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://www.mig33eagle.com/' title='Mig33 Eagle'>Home</a></li>
<li id='kwick3'><a href='http://mig33eagle.com/2012/09/sitemap.html' title='Sitemap'>Sitemap</a></li>
<li id='kwick4'><a href='http://mig33eagle.com/2012/02/link-exchange.html' title='Link Exchange'>Exchange</a></li>
<li id='kwick5'><a href='http://www.123contactform.com/form-366627/Ayuningnareswari' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://www.mig33eagle.com/2011/12/eagle-bot-flooder-multy-flood.html' title='Info EBF'>Info EBF</a></li>
</ul>
</div></center>
 @Ubah url sesuai keinginan sobat.

Demikian tutorial blog cara membuat menu navigasi kwick, semoga infonya berguna!


 
Top