Rata-rata setiap widget yang pembuatannya menggunakan efek jquery hasilnya menurut saya bagus dan apik, terutama bagian untuk animasinya, script ini saya ambil dari Jeremy Martin Blog, unruk mengunjungi blognya kalian bisa meng-klik link source pada bagian bawah post, untuk melihat hasil contoh yang dibuat oleh Jeremy martin kalian bisa masuk alamat http://www.jeremymartin.name/examples/kwicks.php?example=1 disini saya hanya mengganti tampilan akhir dari menu slide efek jquery.
Untuk tahap membuatnya, masuk pada bagian Design - Edit HTML, kemudian cari kode ]]></b:skin> kemudian letakan kode css dibawah ini diatas kode ]]></b:skin>
Selanjutnya cari kode <head> dan letakan kode di bawah ini diatas kode <head>
Save template
Kemudian masuk Design - Page Element dan pilih add Gadget - HTML/javascript untuk posisi tampilan menu slide dan masukan script dibawah ini di dalamnya - kemudian Save
Untuk melihat hasilnya, kalian bisa klik link demo dibawah :
Untuk tahap membuatnya, masuk pada bagian Design - Edit HTML, kemudian cari kode ]]></b:skin> kemudian letakan kode css dibawah ini 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iafqmsEv4WFUsjjxB7G3Qe7eD4ExVvMAgMl0rg-J63VyCUhdcDbBjjfOW3QqTlswmij1gGaIRwKNBxlmWTOlXCVAaFt5hsjVNAuzJacWJ3df2VUgnu0woOuf7RRL5DzDPKfcQZUvRvFB/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
}
}
.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/AVvXsEg-iafqmsEv4WFUsjjxB7G3Qe7eD4ExVvMAgMl0rg-J63VyCUhdcDbBjjfOW3QqTlswmij1gGaIRwKNBxlmWTOlXCVAaFt5hsjVNAuzJacWJ3df2VUgnu0woOuf7RRL5DzDPKfcQZUvRvFB/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
}
Selanjutnya cari kode <head> dan letakan kode di bawah 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'/>
<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
Kemudian masuk Design - Page Element dan pilih add Gadget - HTML/javascript untuk posisi tampilan menu slide dan masukan script dibawah ini di dalamnya - kemudian Save
<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>
<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>
Untuk melihat hasilnya, kalian bisa klik link demo dibawah :
0 comment :
Posting Komentar