Membuat Menu Slide Blogger Menggunakan jQuery
Kamis, 26 April 2012
0
komentar
FULLKA DOT kali ini akan membahas Menu slide blogger menggunakan jquery, hasil tampilannya cukup bagus, memberikan efek animasi bergeser bila mouse diarahkan pada salah satu bagian menu.
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 :
Semoga bermanfaat,
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>
<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://www.fullkadot.com/' title='Fullka Dot home'>Home</a></li>
<li id='kwick2'><a href='http://www.fullkadot.com/' title='kirim email'>Contact</a></li>
<li id='kwick3'><a href='http://www.fullkadot.com/ title='about me'>About Me</a></li>
<li id='kwick4'><a href='http://www.fullkadot.com/2011/04/link-exchange.html' title='Link Exchange 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://www.fullkadot.com/' title='Fullka Dot home'>Home</a></li>
<li id='kwick2'><a href='http://www.fullkadot.com/' title='kirim email'>Contact</a></li>
<li id='kwick3'><a href='http://www.fullkadot.com/ title='about me'>About Me</a></li>
<li id='kwick4'><a href='http://www.fullkadot.com/2011/04/link-exchange.html' title='Link Exchange 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 :
Menu slide ini, untuk sebagian template, terutama template default blogger hasilnya tidak sempurna
Semoga bermanfaat,
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Menu Slide Blogger Menggunakan jQuery
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/04/membuat-menu-slide-blogger-menggunakan.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Trik dan Tips Blog
0 komentar:
Posting Komentar