Membuat Menu Slide Blogger Menggunakan jQuery

Posted by Gani Mugni 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>



.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://3.bp.blogspot.com/-mK6Cb1XtLmM/TvoyuSgJ_ZI/AAAAAAAAAYE/tF_lAg7b_Bc/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'/>

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>

Untuk melihat hasilnya, kalian bisa klik link demo dibawah :







Menu slide ini, untuk sebagian template, terutama template default blogger hasilnya tidak sempurna

Semoga bermanfaat,










MobGold Banner 468x60
MobGold Banner 468x60
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Menu Slide Blogger Menggunakan jQuery
Ditulis oleh Gani Mugni
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.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.