Navbar Blogger Menggunakan JQuery

Tentang Navbar Blogger lagi yang kebanyakan jarang diminati oleh para Blogger karena dianggap mengganggu pemandangan. Sebenarnya saya pernah membahas masalah Navbar Blogger ini akan tetapi pada postingan terdahulu hanya menggunakan code CSS yang terbilang cukup mudah untuk diterapkan oleh Blogger pemula sekalipun.
Adapun 2 cara yang pernah saya posting yaitu Menghilangkan Navbar Blogger dan yang satunya lagi adalah Blogger Navbar Appear And Disappear atau dengan kata lain bisa muncul dan sembunyi, muncul jika disorot dengan mouse dan sembunyi jika tidak disorot dengan mouse, silahkan buka kembali jika sobat lupa atau belum pernah membacanya.
Nah untuk yang sekarang sebenarnya sama saja dengan Blogger Navbar Appear And Disappear bedanya untuk yang satu ini membuatnya menggunakan JQuery yang terbilang sedikit rumit meskipun tidak memerlukan code yang banyak. Cara ini menggunakan JavaScript agar Navbar bisa menjadi transparan dan sobat bisa mengatur efek transparan Navbar ini mulai dari 0% (Kondisi Normal) sampai 100% (Tidak Kelihatan).
Jika sobat ingin belajar atau hanya sekedar ingin mencoba saja silahkan simak cara berikut ini:

1. Login ke Blogger.com.
2. Klik menu Rancangan yang merupakan perubahan dari menu Tata Letak.
3. Klik menu Edit Html dan jangan centang Expand Template Widget.
4. Cari code </head>.
5. Jika sudah ketemu copy code di bawah ini dan paste di atas code tadi.

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

Sedikit penjelasan, Angka yang saya cetak merah

0.1

menunjukkan efek transparan dari Navbar sebesar 90% dan jika ingin tidak kelihatan sama sekali ganti angka

0.1

dengan

0.0

.
Jika sobat ingin Navbar tetap dalam kondisi transparan ketika mouse di arahkan ganti angka

1.0

yang saya cetak kuning menjadi

0.75

untuk mendapatkan efek transparan sebesar 25%.

6. Selesai, lihat perubahan dengan klik tombol berwarna hijau bertuliskan Pratinjau dan jika sudah sesuai dengan keinginan klik tombol Simpan Template.


Bagaimana sobat cukup mudah bukan, nah silahkan di praktekkan dan selamat mencoba.


Sumber Script: Ardianzzz

Tweet