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...
kalau saya sih pake yang auto hide...
BalasHapustapi yang boleh dicoba juga. mungkin kalo ada waktu saya coba test dah. lagi asyik blogwalking nih. thankz mas!!
wah kalau sy malah tidak menggunakan navbar tuh..
BalasHapuspake jquery ya mas...
BalasHapus@Gori ya iyalah Mas, kode diatas kan udah jelas...he..he..he....
BalasHapusga bakalan ngelanggar tos blogspot yah mas?
BalasHapusthanks sharingnya, tapi apa ndak bikin berat tu mas ?
BalasHapus@spy pen camera : Navbar bloggernya kan masih ada, kk (cuma dimodifikasi).
BalasHapus@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.
keren sob !!!
BalasHapusBoleh dicoba juga nih..
BalasHapusHai.. mat kenal, blog baru nih....
BalasHapussalamz blogger...
BalasHapusizin nobak nih om...
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.
BalasHapusTerima kasih atas tipsnya
BalasHapus@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.
BalasHapuspuasa tlah memasuki hari ke 16, smoga kita semua di beri kekuatan sehingga dapat bertahan sampai hari kemenangan tiba. amin! selamat menajalankan ibadah puasa.
BalasHapustriknya oke banget ni
BalasHapusmakasih untuk sharingnya ... salam kenal yaw ...
BalasHapusmantap boss boleh juga nih di ikutin...salam kenal kunjungan perdana
BalasHapussalam kenal ajah. makasih tipsnya
BalasHapusThanks. nice blog
BalasHapussob, tukeran link yuk dgn blog saya..
BalasHapussaya tunggu yah... :)
thx
Template saya kalo pake navbar jadi jelek, kalo autohide aja bisa ga ya?
BalasHapusmau nanya boz, kalau ditemplate udah ada jQuery nya . kode jQuery nya dipake lagi g?
BalasHapusklo navbarnya dihilangin melanggar tos kah?
BalasHapuscoba dulu trik blogger jquerynya :D
BalasHapusthanks ya bos :)
mantap infonya gan, thax yaa
BalasHapusmas,ada cara buat ganti logo blogger ga'??
BalasHapusitu tuh yang ada di tab menu mozzila..
thank's sebelumnya....
tutorial bagus gan
BalasHapusmakasih infonya bos… patut d coba neh
BalasHapusbagus banget mas........makasih ya....
BalasHapusKalau tutorial untuk mengganti logo blogger ada nggak
BalasHapusMantap Infonya..
BalasHapusasik gila nih.. tengkyu
BalasHapusmakasi infony y
BalasHapussangat bermanfaat bagi saya
Makasih.... !!
BalasHapus