Cara Mudah Membuat Sticky Menu/Navigasi Blog Tetap Muncul Saat di Scroll

Membuat menu navigasi blog agar tetap muncul walaupun discroll adalah salah satu hal yang baik untuk diterapkan pada setiap blog yang kita miliki , hal tersebut berguna untuk memudahkan pengunjung blog membuka menu pada saat telah mengscroll , karena pengunjung tidak lagi direpotkan untuk melakukan scroll kembali menuju atas .

Hal berikut biasa disebut sebagai Sticky menu , sangat friendly dengan tampilan template blog yang sudah kita terapkan , dan tidak perlu lagi untuk membuat menu navigasi baru , karena ini hanya akan membuat menu yang telah kita buat sebelumnya menjadi sticky atau tetap muncul walaupun telah discroll.

Cara untuk membuat Menu Navigasi blog tetap muncul walaupun telah discroll / Sticky Menu

1.Masuk terlebih dahulu pada halaman Dashboard Blogger anda

2.Kemudian pilih Menu Theme / Tema , Kemudian Edit HTML

3.Selanjutnya anda copy dan paste code dibawah ini tepat diatas kode ]]><b:skin>

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;}

4.Dan berikutnya copy dan pastekan juga code berikut tepat diatas kode </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>

5.Lalu letakan code berikut dibagian atas dan bawah code Menu Navigasi blog anda

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

Biasanya code Menu Navigasi diawali dengan <nav id= , <div id=

6.Dan selanjutnya anda copy pastekan script berikut ini tepat diatas </body>

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

7.Lalu Save template yang telah anda rubah tadi , kemudian silahkan cek blog anda , apakah sudah berhasil atau tidak

Nah .. demikianlah artikel tentang [TERBAIK] Cara Mudah Membuat Menu Navigasi Blog Tetap Muncul Saat di Scroll.
Semoga bermanfaat dan membantu ..
Terima kasih sudah berkunjung

Share this post