Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

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

Template blog juga sangat mempengaruhi kesuksesan sebuah blog, karenanya 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 saya akan membagikan sedikit tutorial yang mungkin bermanfaat untuk anda yaitu Cara membuat menu navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini saya peruntukan bagi yang ingin sekali membuat menu navigasi sticky seperti blog lain yang menggunakan, dan cara ini bisa dibilang sedikit rumit, oleh karena itu silahkan di simak 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 saya adalah #navitions.

Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

3. Silahkan catat atau hafalkan kode tersebut, kemudian silahkan cari kode </body>, jika 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 ganti kode #nav diatas dengan kode menu navigasi yang sebelumnya ada hafalkan atau catat.

5. Biasanya menu tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yang ada pada kode menu seperti langkah no 2, dengan width:950px; atau jika tidak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda bisa diganti 950px dengan ukuran lain.

Itulah cara membuat menu navigasi tetap walaupun di scroll kebawah, sekian tips blog yang dapat saya bagikan dan Semoga berhasil.
Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

Tweet

Subscribe to receive free email updates: