Cara Membuat Header Blog Tidak Bergerak Pada Layar Saat Discroll

Cara Membuat Header Blog Tidak Bergerak Pada Layar Saat Discroll ~ Bagi penikmat blog tampilan sangatlah penting bagi pengunjung dikarenakan pengunjung akan merasakan betah atau tidaknya berselancar diblog yang kita miliki dan juga akan menghasilkan nilai plus bila tampilan blog kita itu simple dan menarik, dan yang lagi ngetren sekarang adalah Header Sticky atau posisi header yang menempel pada layar ketika kita scroll tidak ikut bergerak.

Nah kali ini saya akan memberikan Cara Membuat Header Blog Tidak Bergerak atau lebih dikenal dengan Header Sticky langkahnya cukup simpel anda hanya perlu ikutin cara-cara dibawah ini, caranya ada 2 silahkan anda pilih yang mana menurut anda mudah.

Cara Pertama

• Login ke dasboard blog
• Pilih Tema lalu klik customize/sesuaikan lalu  pilih Edit HTML
• Setelah terbuka, cari dengan tekan CTRL+F ketikan #Header, .header, #header-wrapper, .header-inner atau elemen header blog namun jika hanya ingin merubah pada versi mobile maka cari .mobile .header-inner dll.
• Setelah ketemu tambahkan kode dibawah ini kedalam tanda {

position:fixed; 

z-index:200; 

width:100%;

•  Jika ingin mengatur jarak dengan content maka cari kode #main.., #content.., #main-wrapper., #content-wrapper dll, tambahkan kode dibawah ini kedalam tanda pembuka { 

padding-top: 60px !important;

• Lalu simpan (angka 60 adalah ukuran jarak) 

Cara Kedua 

• Seperti biasa Login terlebih dahulu ke dashboard
• Pilih Tema lalu klik sesuaikan dan pilih Edit HTML
• Cari dengan tekan CTRL+F kode </body>, dan tambahkan kode dibawah tepat sebelum kode </body>

<script>

    //<![CDATA[

    bs_makeSticky("HEADER");

    function bs_makeSticky(elem) {

        var bs_sticky = document.getElementById(elem);

        var scrollee = document.createElement("div");

        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);

        var width = bs_sticky.offsetWidth;

        var iniClass = bs_sticky.className + ' bs_sticky';

        window.addEventListener('scroll', bs_sticking, false);

        function bs_sticking() {

            var rect = scrollee.getBoundingClientRect();

            if (rect.top < 0) {

                bs_sticky.className = iniClass + ' bs_sticking';

                bs_sticky.style.width = width + "px";

            } else {

                bs_sticky.className = iniClass;

            }

        }

    }

    //]]>

    </script>

    <style>

    .bs_sticking {position:fixed; top:0; z-index:9999;}

    </style> 

• Ganti tulisan HEDAER warna merah dengan ID Header blog anda seperti header-wrapper, header-inner dll.
• Simpan dan lihat hasilnya

Itulah salah satu Cara Membuat Header Blog Tidak Bergerak Pada Layar Saat Discroll yang akan terlihat elegan bila diterapkan di template blog anda. Mungkin itu saja tutorial kali ini semoga bermanfaat dan jangan lupa untuk terus berkreatifitas.