Cara membuat menu navigasi Blogger mengambang

Cara Membuat Menu Blogger Anda Mengambang Saat Menggulir


Saya pernah bertanya-tanya bagaimana membuat menu navigasi sebuah Blog mengambang sementara pengguna menggulir ke bawah halaman. menurut saya Ini bisa sangat berguna dan menambah pengalaman bagi pengguna saya, dan pengunjung saya tidak perlu menggulir kembali ke atas halaman untuk melihat link menu pada blog saya.


dan akhirnya saya menemukan sebuah artikel yang memberikan sebuah jawaban dari pertanyan saya. dan saya pun langsung mengaplikasikannya pada blog saya saat itu. dan hasilnya pun menurut saya sangat menyenangkan ketika saya bisa membuat pengunjung saya merasa nyaman dengan blog saya. 


dan bagi anda yang mungkin sedang bertanya-tanya seperti saya waktu itu. disini pun saya akan membagikan sebuah cara tersebut yang mungkin bisa membantu anda menemukan jawaban dari pertanyaan anda saat ini. simak dan ikutilah langkah langkah berikut agar anda paham dan bisa mencoba mengaplikasikannya pada blog anda.


cara 1: setting Menu di Bagian Atas Konten 


Cara pertama dan termudah untuk melakukannya adalah dengan memposisikan menu navigasi Anda di bagian paling atas halaman dan membiarkannya tetap pada posisi tetap (mengambang) saat pengguna menggulir ke bawah. Menjaga menu Anda di bagian paling atas laman Anda itu akan menghindari keharusan menambahkan sebuah JavaScript, jadi jika Anda merasa tidak nyaman dengan mengedit kode blog Anda, maka ini adalah cara terbaik untuk Anda! 


Pastikan Anda telah menambahkan widget "Halaman" Blogger ke salah satu area header di halaman Tata Letak anda. Kemudian, ikuti langkah-langkah di bawah ini:


1. Pergi ke Dashboard Blogspot anda lalu klik Theme/Template




2. lalu klik Customize / Sesuaikan halaman.




3. selanjutnya Pilih Advanced dari menu samping lalu ganti dengan Tambahkan CSS "add CSS"




4. Tambahkan kode CSS berikut ke kotak:

/* Blogger floating menu by mashansome.blogspot.com*/

#navbar {display:none}

#PageList1 ul { 
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}

.content-inner {
margin-top:30px;
}


5. Ubah variabel "lebar-maks" ke lebar keseluruhan area konten blog Anda sendiri. Anda dapat menemukan lebar blog Anda dengan membuka menu "Theme Width" (Lebar Tema) pada menu advanced. dan anda akan melihat angkanya di area "Seluruh Blog". (untuk ini sesuaikan dengan Blog anda)


6. Variabel "margin-top" haruslah tinggi menu navigasi Anda. Anda dapat membiarkannya jika Anda belum mengubah menu Halaman Blogger Anda.


7. Anda juga dapat mengubah variabel warna latar belakang menjadi kode warna hex sesuai pilihan Anda.


8. Jika sudah Simpan perubahan Anda dan buka halaman Template> Edit HTML


9. Tepat sebelum </head> di kode, tempel kode berikut:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by Mashannsome A Blog.com-->
<script type='text/javascript'>
//<![CDATA[ 
$(function() {
        var nav = $('#PageList1 ul');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                   });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
//]]>  
</script>


10. Simpan perubahan Anda dan lihat halaman Anda!


Catatan: Jika Anda memiliki masalah dengan menu yang tidak melakukan apa yang seharusnya, itu mungkin karena anda memiliki skrip jQuery duplikat di kode blog Anda. Coba hapus baris pertama kode (jQuery) dan simpan:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Post a Comment

0 Comments