Cara Membuat Header Blog Menjadi Sticky (Menempel di Atas Layar)

Santos el Salam

30 Agustus 2019

Beberapa tahun yang lalu, tampilan header blog yang menempel di atas layar pernah menjadi tren yang disukai para blogger. Dengan header yang menempel di atas, maka ketika blog dibuka lewat ponsel misalnya, posisi header tersebut saat halaman digulir akan tetap muncul (statis/ tidak bergerak) di atas layar mobile kita. Saat ini juga masih banyak beberapa blogger yang menyukai tampilan header yang sticky ini. Bahkan web-web besar seperti kompas.com, liputan6.com dll juga tampilan headernya sticky. Jika anda menginginkan tampilan header blog anda menjadi sticky (menempel di atas), anda bisa ikuti tutorial berikut ini. 

contoh header sticky versi mobile

Membuat Header Blog Menjadi Sticky

Ada dua cara yang bisa anda praktekkan untuk membuat header blog menjadi sticky. Anda bisa pilih satu dari dua cara berikut ini. 

Cara Pertama

1. Buka akun blogger anda.

2. Pilih menu tema dan klik edit html

3. Cari kode </body> dan letakkan kode berikut ini tepat di atas kode </body>

Berikut kodenya:

<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> 

Keterangan: Ganti tulisan HEADER (berwarna merah) dengan id header blog anda atau nama header blog anda. Misal header-wrapper, header-inner dll. 

4. Simpan template dan lihat hasilnya. 

Cara Kedua

1. Pada menu thema pilih edit html

2. Setelah terbuka, cari kode #header , .header, #header-wrapper, .header-inner, atau yang semacamnya (kode elemen header blog). Jika ingin mengganti hanya pada versi mobile maka cari yang seperti .mobile .header-inner dst. 

3. Setelah ketemu, tambahkan kode berikut ini ke dalam kode pembuka {

position:fixed;

z-index:200; 

width:100%;

Kode di atas sudah membuat header anda menjadi sticky. Jika ingin mengatur jarak dengan content/ widget di bawahnya, setelah itu cari kode #main.., #content.., atau yang semisalnya (#main-wrapper, #content-wrapper, atau .tabs-inner dll), kemudian tambahkan kode berikut ini ke dalam kode pembuka {

padding-top: 60px !important;

Keterangan: Angka 60 bisa anda atur sesuai kebutuhan. 

5. Simpan template dan lihat hasilnya. 

Sekian. Semoga bermanfaat. 

Labels: Blogging

Thanks for reading Cara Membuat Header Blog Menjadi Sticky (Menempel di Atas Layar). Please share...!

Facebook

Twitter