Animasi Transparent Navbar

Sumber : (blogspot) Animasi jQuery untuk Navbar by Ardianzzz

Yang perlu dijadikan catatan pada trik ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, mengganti dengan jenis navbar lain, bahkan menghilangkan secara permanen navbar tersebut.

Nah, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin trik blogger ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. Trik ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :

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

Silakan Copas jQuery di atas di atas tag </head>.

Catatan :
Ganti kode yang berwarna merah (0.1 = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai 0.0 :)

Ganti kode yang berwarna hijau (1.0) menjadi 0.75 jika ingin transparasi navbar saat didekati mouse bernilai 25%. Sedangkan jika tetap pada nilai 1.0, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.
Selamat mencoba...

35 komentar untuk “Animasi Transparent Navbar”

  1. kalau saya sih pake yang auto hide...

    tapi yang boleh dicoba juga. mungkin kalo ada waktu saya coba test dah. lagi asyik blogwalking nih. thankz mas!!

    BalasHapus
  2. wah kalau sy malah tidak menggunakan navbar tuh..

    BalasHapus
  3. @Gori ya iyalah Mas, kode diatas kan udah jelas...he..he..he....

    BalasHapus
  4. ga bakalan ngelanggar tos blogspot yah mas?

    BalasHapus
  5. thanks sharingnya, tapi apa ndak bikin berat tu mas ?

    BalasHapus
  6. @spy pen camera : Navbar bloggernya kan masih ada, kk (cuma dimodifikasi).
    @blog buat seo : Relatif kk, tergantung banyak sedikitnya komponen lain yang mempengaruhi beratnya blog diloading. Tapi klo cuma trik blogger ini, OB rasa tidak terlalu berpengaruh.

    BalasHapus
  7. Hai.. mat kenal, blog baru nih....

    BalasHapus
  8. salamz blogger...

    izin nobak nih om...

    BalasHapus
  9. Transaparant ya mas jadi tidak kelihatan dong mas,katanya kalau kita mau kasih hilang tinggal di kasih kode display:none;.terima kasih mas sudah berbagi.

    BalasHapus
  10. @Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online : Bukan hilang begitu saja, kk. Kalau menggunakan atribut display:none; berarti menghilangkan navbar. Tapi dalam trik ini, navbar akan transparan sebelum didekati mouse. Jika didekati mouse, maka navbar akan terlihat.

    BalasHapus
  11. puasa tlah memasuki hari ke 16, smoga kita semua di beri kekuatan sehingga dapat bertahan sampai hari kemenangan tiba. amin! selamat menajalankan ibadah puasa.

    BalasHapus
  12. makasih untuk sharingnya ... salam kenal yaw ...

    BalasHapus
  13. mantap boss boleh juga nih di ikutin...salam kenal kunjungan perdana

    BalasHapus
  14. salam kenal ajah. makasih tipsnya

    BalasHapus
  15. sob, tukeran link yuk dgn blog saya..
    saya tunggu yah... :)
    thx

    BalasHapus
  16. Template saya kalo pake navbar jadi jelek, kalo autohide aja bisa ga ya?

    BalasHapus
  17. mau nanya boz, kalau ditemplate udah ada jQuery nya . kode jQuery nya dipake lagi g?

    BalasHapus
  18. klo navbarnya dihilangin melanggar tos kah?

    BalasHapus
  19. coba dulu trik blogger jquerynya :D

    thanks ya bos :)

    BalasHapus
  20. mantap infonya gan, thax yaa

    BalasHapus
  21. mas,ada cara buat ganti logo blogger ga'??
    itu tuh yang ada di tab menu mozzila..
    thank's sebelumnya....

    BalasHapus
  22. makasih infonya bos… patut d coba neh

    BalasHapus
  23. bagus banget mas........makasih ya....

    BalasHapus
  24. Kalau tutorial untuk mengganti logo blogger ada nggak

    BalasHapus
  25. makasi infony y
    sangat bermanfaat bagi saya

    BalasHapus