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..


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;
}

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
    $(&quot;ol&quot;).mouseover(function(){
        $(this).stop().animate({height:&#39;60px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
    //When Mouse cursor removed from ol
    $(&quot;ol&quot;).mouseout(function(){
        $(this).stop().animate({height:&#39;30px&#39;},{queue:false, duration:600, easing: &#39;easeOutBounce&#39;})
    });
});
</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.


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.