By Girant_31
Judul yang aneh.. hehe..
Bicara jQuery memang tidak bakalan ada habisnya..
Maklum ane lagi seneng-seneng nya ngutak-atik jQuery neg..
Setelah bereksperimen, jadi juga neg Menu Nongol a Hover.. (apa jeh..).
Menu Nongol a Hover ini adalah seperti Accordion All In Widget yg sudah ane bahas dahulu..
Bedanya Menu Nongol a Hover ini tanpa Click loh..
Cukup kita lewati dg Cursor Mouse, maka akan muncul keseluruhan menunya.
Penasaran???
Mari kita lihat demonya..
Demo Menu Nongol a HoverKlik disini untuk melihat demo Menu Nongol a Hover
Atau sobat bisa lihat langsung di sidebar blog ane ini, di widget Statistic..
Lewati dg cusror sobat ke arah salah satu yg terdapat di widget Statistic tersebut,
Lihat apa yg terjadi ???
Akan muncul seperti gambar diatas..
Mengerti kan maksud dari Menu Nongol a Hover ini??
Ok kalo sudah mengerti, ini die cara membuatnya :
Langkah 1
Sediakan kompor, kewali, panci dll.. (Mari kita masak..!! Hahaha..).
Serius-serius..
Seperti biasa cari kode ]]></b:skin> pada halaman Tata Letak - Edit HTML
Lalu letakan kode dibawah ini diatas nya.
- ol {
- height:30px;
- width:255px;
- overflow:hidden;
- color: #fff;
- text-decoration: none;
- font-size:12px;
- font-weight: bold;
- line-height: 1;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- -moz-box-shadow: 0 1px 3px #999;
- -webkit-box-shadow: 0 1px 3px #999;
- text-shadow: 0 -1px 1px #222;
- border-bottom: 1px solid #222;
- padding: 8px 10px 6px;
- margin-top:5px;
- background-color:#a447cf;
- }
- ol p {
- margin-top:5px;
- padding-top:15px;
- font-size:12px;
- color:#6CF;
- }
ol { height:30px; width:255px; overflow:hidden; color: #fff; text-decoration: none; font-size:12px; font-weight: bold; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; text-shadow: 0 -1px 1px #222; border-bottom: 1px solid #222; padding: 8px 10px 6px; margin-top:5px; background-color:#a447cf; } ol p { margin-top:5px; padding-top:15px; font-size:12px; color:#6CF; }
Langkah 2
Cari kode </head>
Lalu letakan kode di bawah ini diatas nya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
Catatan :
Bagi sobat yang pernah menambahkan atau ditemplate sobat
sudah terdapat kode JQuery seperti di atas,
maka langkah kedua abaikan saja.
Langkah 3
Kemudian tambahkan pula kode dibawah ini,
dibawah kode JQuery tadi (pd Langkah 2)
- <script src='http://daftarisi-girant.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
- <script type='text/javascript'>
- $(document).ready(function(){
- //When Mouse rolls over ol
- $("ol").mouseover(function(){
- $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
- });
- //When Mouse cursor removed from ol
- $("ol").mouseout(function(){
- $(this).stop().animate({height:'30px'},{queue:false, duration:600, easing: 'easeOutBounce'})
- });
- });
- </script>
<script src='http://daftarisi-girant.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //When Mouse rolls over ol $("ol").mouseover(function(){ $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); //When Mouse cursor removed from ol $("ol").mouseout(function(){ $(this).stop().animate({height:'30px'},{queue:false, duration:600, easing: 'easeOutBounce'}) }); }); </script>
Langkah 4
Simpan template kedalam Lemari sobat.. hehe..
Langkah 5
Tambahkan kode dibawah ini pada Add a Gadget HTML / Java Script
<div id="vnav">
<ul>
<ol><h1>Home</h1><p>Rumah</p></ol>
<ol><h1>About Me</h1><p>Tentang Saya</p></ol>
<ol><h1>Black</h1><p>Artinya Hitam</p></ol>
<ol><h1>Red</h1><p>Artinya Merah</p></ol>
</ul>
</div>
Kode yg berwarna Merah adalah Judul yg akan ditampilkan otomatis.
Ganti dg judul sesuai kehendak sobat.
Kode yg berwarna Biru adalah Keterangan yg disembunyikan,
dan akan tampil hanya bila dilewati oleh cursor sobat.
Ganti juga sesuai keinginan sobat.
Source Code Menu Nongol a HoverKlik disini untuk mengambil semua source code Menu Nongol a Hover
Langkah 6
Save dan lihat hasilnya.
Gimana?? Ok kan???
Nb.
Jika hasilnya tidak sesuai, mungkin ukuran font yg terlalu lebar, Warna, atau yg lain nya..
Trick nya, Sobat utak atik az lagi pada Padding, Background-color, Font-size
dan yang lain nya pada kode Langkah 1.
Sekian cuap-cuap ane kali ini..
Semoga berhasil dan Semoga bermanfaat.
jQuery
,
Tips n Trik


Title Posted By On Tag Comments Subscribe |
: Menu Nongol a Hover : Agus Adi S. From Girant_31 Blog : Jumat, Juni 11, 2010 : jQuery , Tips n Trik : 52 People Commented : RSS Feed or leave a response for this article, Here. |
NO COMENT
malam juga ya
Udah gue cek.
Naksir deh lihatnya.
Takjub :)
Keren abis.
Suer deh, beneran gak pake boong :)
mangga atuh.... sing seringnya....
wah mas bisa aja... ane jadi malu...
makasih mas...
semoga bermanfaat mas...
wah... ane ikut seneng deh klo mas suka....
semoga bermanfaat ya....
mas bisa aja neh....
semoga bermanfaat ya mas...
met berakhir pekan
salam hangat dari blue
Ane jg bingung mas.. hehe..
Makasih..
Met berblogwalking ya..
Sama2..
Semoga ya mas..
jangan kaya nya.. hehe..
Salam hangat jg mas..
Makasih sudah nyempetin mampir kmari lg..
Keren apanya mas..
Masih keren n bagusan blog punya mas fai atuh..
Sama2 mas..
Semoga ilmunya bermanfaat ya mas..
Sayang ya mas mantap nya lama.. hehe..
Sama-sama mas..
Terimakasih atas kunjungan nya..
kapan-kapan ntah kapan dicoba biar mudeng ....
Iya tuh mas..
Gmn rasanya ya?? hehe..
Semoga berhasil dan semoga bermanfaat ya mas..
Jangan dalam2 ya mas.. hehe..
Bang hover mas..
Jadi kapan dunk pak liek??? hehe..
Ringan dunk.. klow berat mah ane pikul mlu kali mas.. wkwkwwk..
Terimakasih mas..
bisa di copi paste di blogku nggak ya...????
mo numpang coment:
NO COMENT
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mangga atuh.... sing seringnya....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kawan..Anda memang pinter sekali.
malam juga ya
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
wah mas bisa aja... ane jadi malu...
makasih mas...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Met malam mas...thnxs info na mas.
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
semoga bermanfaat mas...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Wuuuu...keren banget bro.
Udah gue cek.
Naksir deh lihatnya.
Takjub :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
wah... ane ikut seneng deh klo mas suka....
semoga bermanfaat ya....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Mantap kawan.
Keren abis.
Suer deh, beneran gak pake boong :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mas bisa aja neh....
semoga bermanfaat ya mas...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
wah postingannya keren bang. . . Skalian blogwalking.
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Makasih..
Met berblogwalking ya..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
hmm tutorial bgus..tapi saya masih bingung..@.@
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Ane jg bingung mas.. hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
thank infonya gan
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Sama2..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
OK mas...aku coba ya...kayaknya sukses nih...kenetulan blog lain ku udah "rame" dg tips2 mu...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Semoga ya mas..
jangan kaya nya.. hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
lama tak mampir
met berakhir pekan
salam hangat dari blue
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Salam hangat jg mas..
Makasih sudah nyempetin mampir kmari lg..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
emang keren neh blog, blog gue dibuat keren dong cuyyyyyyy
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Keren apanya mas..
Masih keren n bagusan blog punya mas fai atuh..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Dapat ilmu bru kg ni..thnxs mas
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Dapat ilmu bru kg ni..thnxs mas
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Sama2 mas..
Semoga ilmunya bermanfaat ya mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mantap nih blog lama2 :)
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Sayang ya mas mantap nya lama.. hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
thanks neh tutornya lagi gan
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Sama-sama mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
berkunjung malam
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Terimakasih atas kunjungan nya..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
memasak html ni heheh
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Iya tuh mas..
Gmn rasanya ya?? hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
tutor yg mantap.Akan aq coba.Mksh ya
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Semoga berhasil dan semoga bermanfaat ya mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Met malam mas mampir lg ni sambil mendalami artikel na...keren y mas gadget na..thnxs dah share mas
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Met malam mas mampir lg ni sambil mendalami artikel na...keren y mas gadget na..thnxs dah share mas
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Jangan dalam2 ya mas.. hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mantap kali niy hang over nya eh a hover...
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Bang hover mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
lom mudeng ....
kapan-kapan ntah kapan dicoba biar mudeng ....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Jadi kapan dunk pak liek??? hehe..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
pengen nyoba sih, ringan kan ni buat blog..hehe
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Ringan dunk.. klow berat mah ane pikul mlu kali mas.. wkwkwwk..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Wahhh cantiknya di template....Suksess Kawannn!!!!!!!!!!!
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Terimakasih mas..
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
keren sob tp blog q dah kelewat berat
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
Kayanya Jquery emank lagi banyak dipake nie.....ntar ane coba di Blog private hhe....tararengkyu Sob....
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
kren banget sob tutorialnya
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
HATUR NUHUN SOB
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
mantap gan keeep posting
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.
keren...keren mau coba dulu nehh
bisa di copi paste di blogku nggak ya...????
----------- -----------
Terima Kasih Sobat Atas Komentar dan Kunjungan nya ke sini.