Banyak cara membuat agar blog atau website kita menjadi terlihat profesiaonal. Salah satunya adalah dengan tutorial yang akan saya bahas ini cara membuat menu navigasi melayang mengikuti scroll di blog. Sebelumnya saya akan menjelaskan tentang menu navigasi. Navigasi pada blog berfungsi sebagai peta penunjuk pada konten. Biasanya para blogger menggunakannya untuk menampilkan nama label yang mereka buat. Hal ini akan mempermudah pengunjung blog dalam menjelajah konten Anda. Gaya dan jenisnya pun bermacam-macam. Bagaimana dengan sticky? Sebenarnya saya tidak tahu betul apa maksudnya sticky. Mungkin ini salah satu query pada JavaScript. Perintah ini berfungsi agar menu navigasi pada website atau blog kita tetap diam saat discroll. Maksudnya saat kita gulir layar kebawah, menu navigasi blog kita akan tetap muncul di bagian atas. Tentunya ini akan semakin membuat blog Anda terlihat profesional. Banyak website-website resmi terkenal yang sudah menggunakan metode ini.
Cara nya pun sebenarnya sangatlah mudah, tergantung kita nya mau berusaha atau tidak. Kita hanya menerapkan kode JavaScript pada template blog dengan perpaduan class atau id pada CSS. Masih bingung?? Yuk, simak dengan baik langkah berikut
- Login ke akun blogger sobat. Pada halaman blog, pilih pada pilihan Template kemudian klik Edit HTML. Agar lebih jelas perhatikan gambar dibawah ini.
- Anda akan masuk ke halaman form HTML. Disitu Anda akan menemukan berbagai rumus pemrograman web seperiti HTML, CSS, dan JavaScript. Jika Anda baru pernah melihatnya pasti akan bingung, sama halnya seperti saya.
- Sekarang copy-kan kode JavaScript berikut. Kode ini berfungsi sebagai perintah pada id atau class yang digunakan untuk navigasi agar menjadi statis atau diam saat di scroll. Ganti tulisan yang berwarna merah tersebut dengan id atau class yang digunakan pada navigasi Anda.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#navi-arlina').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#navi-arlina').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#navi-arlina').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>- Kemudian paste-kan kode tadi tepat di atas tag </body> Agar mudah dalam pencarian tag tersebut, Anda bisa lakukan dengan menggunakan fungsi keyboard CTRL+F lalu ketik </body> pada kolom pencarian. Selanjutnya klik Simpan Template.
Mudah bukan? Tutorial di atas tidak hanya bisa diaplikasikan pada blog, namun juga bisa kita imporvisasi kan pada pembuatan template kita sendiri. Sekian tutorial dari saya bila masih ada hal yang mengganjal, silahkan berkomentar.
0 komentar:
Posting Komentar