Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

By | February 22, 2019
Cara Membuat Menu Navigasi Tetap Walaupun di Scroll 1

Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template merupakan sebuah elemen dasar yang membangun sebuah blog atau web yang berisi dari semua fitur seperti Sidebar, Header, Post, footer dan lain-lain. atau dapat dikatekan bahwa template merupakan sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.

Template blog juga sangat mempengaruhi kesuksesan sebuah blog, sebabnya silahkan pilih template yang sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yang membangun template seperti sidebar, Header, Footer dan lain-lain. disini admin akan membagikan sedikit tutorial yang cukup bermanfaat untuk anda yaitu Cara menciptakan menu navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini admin peruntukan bagi yang ingin sekali menciptakan menu navigasi sticky seperti blog lain yang menggunakan, dan cara ini dapat dibilang sedikit rumit, oleh sebab itu silahkan di baca baik-baik. berikut tutrialnya:

Cara Membuat Menu Navigasi Tetap walaupun di Scroll

1. Pertama silahkan masuk ke Blogger – Template – Edit Html.

2. Kemudian Silahkan cari kode Menu navigasi, pada setiap blog kodenya berbeda-beda namun yang pasti terdapat kode (nav), sebagai contoh kode blog admin merupakan #navitions.

Cara Membuat Menu Navigasi Tetap Walaupun di Scroll 2

3. Silahkan catat atau hafalkan kode tersebut, kemudian silahkan cari kode </body>, apabila sudah ketemu copy kode dibawah ini dan paste diatas kode </body>

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

4. Selanjutnya mengganti kode #nav diatas dengan kode menu navigasi yang sebelumnya ada hafalkan atau catat.

Baca :  Cara Mendaftarkan Blog ke Google Webmaster Tools Terbaru

5. Biasanya menu tersebut akan berantakan, untuk mengatasinya silahkan mengganti width:100%; yang ada pada kode menu seperti langkah no 2, dengan width:950px; atau apabila tak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda dapat dimengganti 950px dengan ukuran lain.

Itulah cara menciptakan menu navigasi tetap walaupun di scroll kebawah, sekian tips blog yang dapat admin bagikan dan Semoga berhasil.