Cara Membuat Header Blog Tidak Bergerak (sticky)

Cara Membuat Header Blog Tidak Bergerak (sticky)  - Header sticky, widget sticky, atau sering disebut dengan widget atau layout statis. Artinya widget tertentu dijadikan statis (tidak bergerak).

Layout sticky sering dijumpai pada website-website besar. Sebagai contoh yang sering kita lihat seperti Facebook, Liputan 6 dan masih banyak website lainya. Dimaksud dengan sticky disini adalah "tetap" atau tidak bergerak. Jika website yang menggunakan sticky, ketika discroll widget tertentu tetap tampil (sticky). Hal ini bertujuan memudahkan pengguna menavigasi blog atau website kita .

 

Nah, itulah tujuan dari membuat layout tertentu di blog menjadi sticky. Baiklah sekarang kita lanjut bagaimana cara membuat layout sticky. Kebetulah judul post saya kali ini adalah "Cara Membuat Header Blog Tidak Bergerak (sticky)". Apakah cara ini hanya berlaku pada layout header? tidak, cara ini berlaku untuk semua layout di blog. Artinya layout yang sudah di buat sticky.

Cara membuat layout kali ini sangatlah mudah dibandingkan cara membuat widget sticky sebelumnya. Karena cara membuat sticky widget kali ini menggunakan script yang simple dan tidak ribet. Script ini saya dapatkan pada web seocips.com.

Oke, berikut ini script dan cara penerapannya di blog :

1. Masuk akun blog kalian, dan pilih edit template

2. Copy script sticky dibawah ini (klik 1x)

<script> //<![CDATA[ bs_makeSticky("WIDGET_ID"); 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>

3. Tempatkan script nya diatas kode </body>
4. Ganti WIDGET_ID dengan ID widget blog kalian, Contoh "header-wrapper"
4. Simpan Template dan selesai.

Coba kalian lihat blog kalian dan header blognya akan tetap diam walaupun di scrool kebawah.

Nah. itulah cara membuat header blog tidak bergerak, mudah-mudahan kalian mengerti cara penerapannya.selamat bekerja dan semoga sukses. Jangan lupa untuk ikuti terus blog sebarkan-tips untuk mendapatkan tips selanjutnya.

Share this post