Animasi jQuery Untuk Navbar Blogger

“Blogger meluncurkan navbar baru!”

Sepertinya kita (pengguna blogger) telah mengetahui hal tersebut. Blogger telah menambahkan 2 navbar yang bergaya transparan. Kebanyakan yang telah mereview fitur terbaru ini beranggapan bahwa blogger melakukan hal tersebut agar navbar yang disediakan menjadi lebih diminati karena dapat tampil lebih matching dengan template yang digunakan. Tetapi selama saya menyambangi blog-blog sahabat (pengguna blogspot) kebanyakan dari mereka memilih menghilangkan navbar termasuk saya sendiri.

Saat ini, banyak sekali blog yang membahas bagaimana memodifikasi navbar blogger agar menjadi lebih menarik misalnya navbar auto-hide agar navbar tidak mengganggu penampilan blog.

Kita dapat membuat semacam auto-hide pada navbar menggunakan jQuery. Metode ini memanfaatkan JavaScript untuk membuat efek transparansi pada navbar. Kita dapat mengatur transparansi navbar mulai dari 0% (normal) hingga 100% (tidak kelihatan) atau dengan kata lain Navbar akan kelihatan jika kita meletakkan pointer di atasnya.

Caranya sangat mudah yaitu tinggal copy & paste kode di bawah ini dan letakkan sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.1);
});
});
</script>

Nah, pada kode JavaScript di atas, dapat kita lihat huruf yang berwarna merah (0.1) berarti transparansi navbar sebanyak 90%. Jika menginginkan navbar tidak tampak samasekali, gantilah nilai 0.1 menjadi 0.0.
Jika menginginkan navbar tetap transparan saat mouseover, ubahlah nilai pada angka yang berwarna biru (1.0) menjadi 0,75 (untuk transparansi 25%).

Sangat mudah sekali bukan, selamat mencoba...

§ Live Demo