Menu Slide Blogger Dengan Jquery

Menu Slide merupakan efek animasi bergeser saat di sentuh mouse

nah ,kita bisa membuat nya sebagai menu nih .........


Masuk ke Design dan Edit HTML ,kemudian letakkan kode dibawah ini diatas ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwOp3dAi6BQZrXZU2sju1mBGjWhtuRdi9lbAFHpu1rTodPqmzWNALS7Wqa43kBIfFiAPyj6lucGhnDRYsjo8U7DRBcOcd8nuO4-xjcmh0Fi6fTF1JeXwZQoCdmkinXjCLvACqzpLue4pzC/s1600/menuslidejquery.png
);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}
.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
}
Lalu letakkan kode dibawah ini diatas kode  <head>

<script src='http://situseo.googlecode.com/files/menuslidejquery-1.2.3.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/menuslidejquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/menuslidejquery.easing.1.3.js' type='text/javascript'/>
Save Template kalian

Selanjutnya Add gadget dan isikan HTML diabawah ini
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://situseo.blogspot.com/' title='situseo home'>Home</a></li>
<li id='kwick2'><a href='http://situseo.blogspot.com/' title='kirim email'>Contact</a></li>
<li id='kwick3'><a href='http://situseo.blogspot.com/' title='about me'>About Me</a></li>
<li id='kwick4'><a href='http://situseo.blogspot.com/' title='link exchange'>Link</a></li>
</ul>
</div>

<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Kode tsb bisa kalian edit sendiri yah
Semoga bermanfaat

Komentar

Posting Komentar