Sticky Menu

Sticky Menu

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.

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 agan pasang di menu bar. Dengan menu yang tetap melayang di bagian atas layar monitor, pengunjung blog anda akan betah dengan blog anda. dan mudah mengakses menu di blog anda.

Labels: ,

Post a Comment

  1. Nice post lah buat agan ini :)

    jika berkenan kunjungi balik blog sederhana ini http://night002.blogspot.com

    ReplyDelete
  2. Nice post lah buat agan ini :)

    jika berkenan kunjungi balik blog sederhana ini http://night002.blogspot.com

    ReplyDelete
  3. Isi blog nya keren gan :) high quality :)

    ReplyDelete
    Replies
    1. Amin gan :) Thanks sudah nyasar kesini gan :)

      Delete
  4. Mw dong gan template kayak blog ini, keren banget. high quality. Premium ea? :-?

    ReplyDelete
    Replies
    1. iya gan, 21 dollar... sdh saya upload di blog ini :)

      Delete

Jangan buang waktu percuma untuk membuat komentar SPAM atau sekedar mencari backlink. Karena kedua komentar tersebut akan langsung dihapus.
Admin online 12/7

Author Name

MKRdezign

Contact Form

Name

Email *

Message *

Theme images by Ollustrator. Powered by Blogger.