Cara mudah membuat navigasi melayang saat blog di scroll ke bawah

  Halo sobat blogger,hari ini saya mau posting sehubungan dengan pertanyaan dari kawan-kawan di group facebook , kemarin dari group facebook ada dari antara kawan yang mempertanyakan “ bagaimana cara membuat menu navigasi yang melayang saat di scroll kebawah” sebelum kita lanjut ke cara membuatnya saya akan jelaskan terlebih dahulu ,apa tujuan daripada navigasi melayang ini,tujuan nya adalah untuk membuat blog menjadi semakin edikatif informatife kepada pembaca.

  Berikut langkah-langkah membuatnya.

• ü Login ke akun gmail sobat
• ü Masuk ke dashboard blogger
• ü Klik menu template + edit html ,terlebih dulu cari kode seperti di bawah ini, perlu di ketahiu tiap templat   berbeda kodena ,jadi saya harap fahami dulu kode templat sobat.

Setelah kode sudah ditemukan ,sekarang lanjut kan mencari kode </body> setelah kobe ini sudah ditemukan silahkan copy kode di bawah ini dan pastekan di atas 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();

Silahkan di sesuaikan saja ,kode #nav yang berwarna biru itu ganti dengan kode templat sobat ,disini saya memkai kode #menutop seperti gambar di atas berkolom merah, untuk menbuat nya responsive silahkan cari kode seperti di bawah ini , kode yang tadinya mempunyai satuan persen(%) sekarang rubah menjadi (px).

   Setting di sini harus di lakukan dengan tujuan ketika templat kita scroll kebawah panjang #navigasi tidak melebihi #outer-wrapper ,jika settingan di rasa sudah benar langkah trakhir mensavenya lalu lihat hasilnya, maka akan menghasilkan seperti pada DEMO BErikut.

  Sobat, saya rasa penjelasan di atas sudah cukup detail semoga mudah di fahami , kalau ada pertanyaan silahkan berkomentar ,sekian dulu posting hari ini saya rasa sudah cukup, dan terima kasih atas kunjungannya.

Cara mudah membuat navigasi melayang saat blog di scroll ke bawah 2016-12-10T05:58:00+07:00 Rating: 4.5 Diposkan Oleh: hudacell