Loading...

Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah - Apa khabar sahabat TIMES NEW MALAYSIA, Dalam artikel yang anda baca kali ini dengan tajuk Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah, kami telah menyediakan dengan baik untuk artikel ini anda membaca dan memuat turun maklumat di dalamnya. mudah-mudahan mengisi jawatan Artikel BOLASEPAK, Artikel NEWS, Artikel PERNIAGAAN, kita menulis ini, anda boleh memahami. Nah, selamat membaca.

Tajuk : Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah
link : Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

CARA Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah (Sticky Navigation Bar) sudah pernah CB share di posting sebelumnya: Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali kode yang membuat menu blog Anda melayang, floating, sticky, atau tetap muncul saat halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi trend desain blogger masa kini dan masa depan. 

Sticky Menu ini ramah mengguna, user friendly, karena memudahkan pengguna untuk membuka link ke konten blog yang lain setelah selesai membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan membuat navigasi menu baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.

Cara Membuat Navigasi Menu Tetap Muncul 

KODE CSS

1. Tema > Edit HTML 

2. Simpan kode berikut ini di atas kode ]]></b:skin>

Atau bisa juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas kode berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:

Simpan kode berikut ini di atas kode </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

KODE HTML

"Bungkus" kode navigasi menu blogger Anda dengan kode seperti di bawah ini:

<sticknav> 

Kode HTML Navigasi Menu Anda di Sini

</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=' dst hingga </nav> atau <div id=' dts.. hingga </div>

KODE JAVASCRIPT

Simpan di atas kode </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke kode jQuery.

Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.contohblog.com).*

✍ Sumber Pautan : ☕ Contoh Blog

Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2qnphqF

(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!

CARA Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah (Sticky Navigation Bar) sudah pernah CB share di posting sebelumnya: Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali kode yang membuat menu blog Anda melayang, floating, sticky, atau tetap muncul saat halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi trend desain blogger masa kini dan masa depan. 

Sticky Menu ini ramah mengguna, user friendly, karena memudahkan pengguna untuk membuka link ke konten blog yang lain setelah selesai membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan membuat navigasi menu baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.

Cara Membuat Navigasi Menu Tetap Muncul 

KODE CSS

1. Tema > Edit HTML 

2. Simpan kode berikut ini di atas kode ]]></b:skin>

Atau bisa juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas kode berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:

Simpan kode berikut ini di atas kode </head>

Loading...

class="tr_bq"><style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

KODE HTML

"Bungkus" kode navigasi menu blogger Anda dengan kode seperti di bawah ini:

<sticknav> 

Kode HTML Navigasi Menu Anda di Sini

</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=' dst hingga </nav> atau <div id=' dts.. hingga </div>

KODE JAVASCRIPT

Simpan di atas kode </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke kode jQuery.

Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.contohblog.com).*

✍ Sumber Pautan : ☕ Contoh Blog

Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2qnphqF

(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!

dengan itu Perkara Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

yang semua artikel Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah Kali ini, diharapkan dapat memberi manfaat kepada anda semua. Okay, jumpa di lain post artikel.

Kini anda membaca artikel Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah dengan alamat pautan https://timesnewmalaysia.blogspot.com/2017/05/membuat-navigasi-menu-blog-tetap-muncul.html

Tweet

Subscribe to receive free email updates: