Cara Agar Menu Blog Tetap Diatas Saat Di Scroll (Sticky)

Menu melayang di blog atau yang sering disebut sticky menu berguna agar pengunjung tidak repot saat sudah dibagian bawah blog, dan kembali ke atas lagi untuk melihat konten yang sobat pasang di menu bar. Dengan menu yang tetap melayang di bagian atas layar monitor, pengunjung blog sobat akan betah dengan blog sobat. dan mudah mengakses menu di blog sobat.

Kali ini saya akan membagikan tutorial cara agar menu di blog sobat tetap melayang di atas layar monitor. Tapi sebelumnya tutorial ini untuk blog sobat yang sudah mempunyai menu navigasi, bagi yang belum mempunyai menu di blognya bisa googling cara memasang menu navigasi di blog, atau tunggu artikel selanjutnya.





Langsung ke topic pembicaraan. Ya seperti biasanya sob, silahkan login ke blogger dan pilih Template => Edit HTML.

Gunakan CTRL + F dan cari kode </head>. Copy kode script di bawah ini dan letakkan tetap di atas kode </head> tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
      var sticky_nav_offset_top = $('#nav').offset().top;
      var sticky_nav = function(){
              var scroll_top = $(window).scrollTop();
              if (scroll_top > sticky_nav_offset_top) {
                      $('#nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
              } else {
                      $('#nav').css({ 'position': 'relative' });
              }  
       };
       sticky_nav();

Note :

• Kode warna BIRU adalah JQuery, jika sobat menggunakan JQuery versi lain, maka hapus saja kode tersebut.
• Kode warna MERAH adalah id menu navigasi di blog sobat, silahkan ganti sesuai id menu di blog sobat.

Klik pratinjau terlebih dahulu, jika sudah sesuai keinginan silahkan save template. Selesai.

Share this post