Loading...

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.


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.

loading...

Share this!

5 Responses to "Cara Membuat Menu Navigasi Tetap Walaupun di Scroll"

  1. saya pasang kok gak work ya gan buat template ini coba di cek

    ReplyDelete
    Replies
    1. Masak sih gan! coba agan cek kembali langkah-langkahnya mungkin saja ada yang terlewatkan, untuk tutorial tersebut work kok karena pernah saya coba.

      Delete
  2. Mas, cara agar menu navigasi kita nggak melayang itu gimana ya. dan menu nya tu tetep diam ditempat meskipun di scroll kebawah. ni ss nya mas
    https://prnt.sc/h4tojl

    ReplyDelete
    Replies
    1. Mungkin kode yang Agan masukkan untuk mengganti kode #nav diatas salah, coba kode yang lain.

      Delete

# Silahkan berkomentar sesuai Topik.
# Komentar Anda akan di moderasi terlebih dahulu baru akan di publish
# Dan Jangan sampai kommentar anda mengandung SPAM.

# Terima Kasih