Cara Membuat Sticky Pada Menu Navigasi Blog

Cara Membuat Sticky Pada Menu Navigasi Blog

Posted on

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 Memasang Sticky Pada Menu Navigasi Blog

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.


Cara membuat sticky pada menu blog

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


Cara mengedit template di blogger

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.

Gravatar Image
Seorang mahasiswa sederhana yang menyukai hal-hal baru

Leave a Reply

Your email address will not be published. Required fields are marked *