Membuat Header Blog Menempel di Atas Layar Desktop atau Seluler

Baik Sobat, kali ini saya akan membagikan Tuorial Membuat Header Blog Menempel di Atas Layar Desktop atau Seluler. Karena banyak Website atau Blog sudah kembali tren dengan tampilan Header Blog Menempel di Atas Layar Desktop atau Seluler.

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.

Namun, dengan banyaknya tema atau template yang berkembang Header Blog Menempel di Atas Layar Desktop atau Seluler mulai tidak digunakan lagi.

Tapi saat ini mulai banyak Website atau Blog yang menyukai tampilan header yang sticky ini. Bahkan web-web besar seperti detik.com, kompas.com, liputan6.com dll juga tampilan headernya sticky. Jika anda menginginkan tampilan header blog anda menjadi sticky atau header blog menempel di atas layar desktop atau seluler, anda bisa ikuti tutorial berikut ini.

Membuat Header Blog Menempel di Atas Layar Desktop atau Seluler

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

DEMO

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>

Copy tanpa tanda petik

<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, .heder-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 {

Copy tanpa tanda petik

position:fixed;
z-index:200;
background-color: #fff;

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

Copy tanpa tanda petik

margin-top:200px;

Keterangan: Angka 200 bisa anda atur sesuai kebutuhan. 

5. Simpan template dan lihat hasilnya. 

Sekian tutorial singkat Membuat Header Blog Menempel di Atas Layar Desktop atau Seluler dari saya. Semoga bermanfaat.

Share this post