Cara Membuat Header Melayang di Blogger

Arsipbiru.com - Pada kesempatan kali ini saya akan membagikan tutorial terkait bagaimana cara membuat header melayang di Blogger. Header melayang atau biasa disebut dengan sticky header adalah salah satu fitur yang dapat mempercantik tampilan blog. Header akan seolah-olah melayang ketika halaman digulir ke bawah atau sebaliknya.

Fungsi header melayang sendiri tidak lain agar tidak perlu repot-repot menggulir kembali ke atas ketika ingin menuju ke menu yang berada di header. Tentunya hal ini sangat menguntungkan bagi pemilik blog yang memiliki konten atau artikel yang panjang.

Header melayang yang akan saya bagikan ini memiliki fitur yang secara otomatis hilang dan muncul ketika halaman digulir ke atas maupun ke bawah. Pada tampilan awal, header akan terlihat melayang di atas halaman. Ketika pengunjung menggulir halaman ke bawah, header akan menghilang. Namun, ketika pengunjung menggulir kembali ke atas, header akan muncul kembali dengan posisi yang sama seperti melayang.

Hal ini akan memberikan kesan efektif bagi pemilik blog. Tampilan akan penuh dari atas ke bawah tanpa adanya header yang mengganggu. Namun, header dapat muncul kembali ketika pengunjung menginginkannya.

Jika Anda tertarik ingin memasang sticky header dengan fitur auto show and hide seperti blog Arsipbiru, silahkan simak langkah-langkahnya dengan seksama.

Cara Membuat Header Melayang di Blogger

1. Pertama, masuk ke Blogger > pilih tab menu Tema > klik tanda panah ke bawah Sesuaikan > klik Edit HTML.

2. Disini asumsikan saja bahwa header Anda memiliki kode CSS dengan nama ID #header. Semua kode akan ditulis dengan menggunakan ID tersebut. Jika nama ID berbeda, tinggal menyesuaikan saja. Jika header belum sticky, tambahkan CSS berikut ini di dalam ID #header. Namun, jika header sudah sticky, silahkan lanjutkan ke tahap ketiga.

#header{

  ...

  ...

  ...

  position: sticky;

  position: -webkit-sticky;

  top: 0px;

  transition: top .3s ease;

}

#header.show{

  top: -70px;

}

<script> //<![CDATA[

  /*

    Sticky Header. Auto hide on scroll bottom, show on scroll top.

    By: www.igniel.com

  */

  var prevScrollpos = window.pageYOffset;

  window.onscroll = function() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos) {

      document.getElementById("header").classList.remove('show');

    }

    else { document.getElementById("header").classList.add('show');

    }

    prevScrollpos = currentScrollPos;

  }

//]]> </script>