Cara Membuat Menu Page Tetap Sa'at Laman Di Scroll Pada Blogspot - CARO AWAK SURANG

Cara Membuat Menu Page Tetap Sa'at Laman Di Scroll Pada Blogspot

Assalamu'alaikum Wr Wb. Cara Membuat Menu Page Tetap Sa'at Laman Di Scroll Pada Blogspot itu lah yang kita bahas kali ini tetapi sebelum nya seperti biasa, terlebih dahulu kita selalu mendo'a kan pembaca blog Caro Awak Surang ini semoga tetap dalam lindungan Allah SWT tentunya Amin.




 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #NavbarMenuAtas
    var stickyNavTop = $('#NavbarMenu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya       
        if (scrollTop > stickyNavTop) {
            $('#NavbarMenu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#NavbarMenu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>


Apa itu Menu Page ?. Menu Page ialah suatu bagian terpenting di suatu blog untuk memudahkan pengunjung untuk menuju sebuah Laman pada blog. Ada juga elemen ini disebut menu navigasi yang letaknya pada bagian atas postingan atau dibawah header dan ada juga yang menaruh nya diatas header. Posisinya pun ada yang mengikuti laman jika laman blog itu Di Scroll. Dan ada pula yang diam atau Tetap kalau laman di scroll atau digulir. Tetapi rata rata pada template blogger default menu navigasinya ikut tergulir sa'at laman di scroll. Jika kita ingin membuat menu page atau menu navigasi yang diam atau tetap sa'at laman digulir kita harus mengedit sedikit template blog default itu. Nah cara mengedit nya itu lah yang akan kita terangkan di bawah ini.

 Bagi sobat pembaca yang minat atau yang belum tahu caranya yuk simak langkah nya. Pertama copy kode skript di atas terlebih dahulu. Lantas masuk ke dashboard Blogger untuk memasangnya pada blog sobat. dengan akun google kita seperti biasa > Buka blog kita > Pilih Template > klik Edit HTML > Cari kode </body> untuk mempermudah pencarian gunakan Ctrl+F. Nah paste kan kode CSS tadi tepat di atas kode </body> itu. Catatan: dalam kode itu penulis menambatkan #NavbarMenu silahkan diganti dengan nama (id)gadget untuk menu di blog sobat. Oh iya kode css ini tetap berfungsi pada gadget apa saja tinggal sobat pembaca yang menggunakan nya. Misal nya di blog ini penulis menggunakan nya untuk .header. Itu makanya header atau judul blog ini tetap posisinya walaupun laman nya di scroll.

Demikian lah Cara Membuat Menu Page Tetap Sa'at Laman Di Scroll Pada Blogspot semoga sedikit banyak nya dapat membantu dan semoga berhasil. 

  Wassalam.

SILAHKAN BERBAGI:





1 Komentar untuk "Cara Membuat Menu Page Tetap Sa'at Laman Di Scroll Pada Blogspot"

Pesan Admin tentang tanggung jawab konten:
=================================
Biasakan membaca Persyaratan layanan, Kebijakan Privacy dan Disclaimer yang kami sediakan link nya di atas JUDUL blog ini bagi pengguna desktop sebelum menggunakan Konten yang ada didalam blog ini baik itu kode script/widget atau pun tips2 dan tutorial lainnya.

Tentang Komentar:
Demi perkembangan, Silah kan ditinggalkan komentar, baik itu bentuk kritik atau saran yang berhubungan dengan isi postingan.
Setiap komentar yang sesuai* akan di terbit kan segera.

Tidak dibenarkan meninggalkan link hidup didalam kolam komentar dalam bentuk apapun, karena yang demikian akan di anggap sebagai SPAM.

*) Selalu memakai bahasa yang sopan dan tidak melanggar etika.
Berkomentarlah yang berkaitan dengan tema postingan.
Tidak dibenarkan beriklan.

Back To Top