Tetap Muncul Saat Halaman Discroll ke Bawah  Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah
CARA Membuat Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali instruksi yang menciptakan hidangan blog Anda melayang, floating, sticky, atau tetap muncul ketika halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi animo desain blogger abad sekarang dan abad depan. 

Sticky Menu ini ramah mengguna, user friendly, alasannya memudahkan pengguna untuk membuka link ke konten blog yang lain sesudah final membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan menciptakan navigasi hidangan baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.

Cara Membuat Menu Melayang Saat Discroll

Berikut ini cara lebih gampang untuk menciptakan hidangan melayang ketika discroll.

1. Tema > Edit HTML
2. Copas instruksi jquery berikut ini di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'/>

Jika di dalam template Anda sudah terdapat instruksi jquery menyerupai di atas, eksklusif saa ke langkah ketiga.

3. Copas instruksi berikut ini sempurna di atas kode </body>

    <script type='text/javascript'>
      $(document).ready(function() {
        var stickyNavTop = $('#menu').offset().top;
        var stickyNav = function(){
          var scrollTop = $(window).scrollTop();
         if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
          } else {
            $('#menu').css({ 'position': 'relative' });
          }
        };
        stickyNav();
        $(window).scroll(function() {
          stickyNav();
        });
      });
    </script>

4. Ganti #menu dengan nama navigasi hidangan blog Anda, mungkin #menu-nav.navmenu, atau nama lainnya. Cek instruksi CSS navigasi hidangan Anda.

5. Save Template!

Cara Lain Membuat Menu Tetap Muncul Saat Scroll ke Bawah

1. Tema > Edit HTML 
2. Simpan instruksi berikut ini di atas instruksi ]]></b:skin>

Atau sanggup juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas instruksi berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:
Simpan instruksi berikut ini di atas instruksi </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

3. "Bungkus" instruksi navigasi hidangan blogger Anda dengan instruksi menyerupai di bawah ini:

<sticknav>
<!--Kode HTML Navigasi Menu Anda di Sini-->
</sticknav>

Kode navigasi hidangan biasanya diawali dengan kode <nav id=' dst sampai </nav> atau <div id=' dst.. sampai </div>

4. Simpan instruksi berikut ini di atas instruksi </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke instruksi jQuery.



5. Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours