natinedJs ⓚ 2020 Terbiasa menggunakan situs atau aplikasi dimana kop atau kepala situs tidak bergerak bila kursor diseret ke bawah atau ke atas?. Lihat contohnya di tempo.co.id dan trinbunnews.com atau lihat aplikasi whatapps. Aplikasi chat tersebut lebih banyak membuat sub header tetap sehingga pengguna mudah menavigasi aplikasinya untuk dilempar ke bagian yang diinginkan.
Sumber : pojoksatu.id
Bayangkan bila navigasi pengguna tersebut tidak tetap atau mengikuti body aplikasi pengguna akan kesulitan untuk menavigasi aplikasi tersebut.
Dari gambar salah satu web site berita pojoksatu.id bagian header dari situs tersebut tidak bergerak saat digeser ke bawah. Hal ini membuktikan dengan menggunakan sticky situs atau blog dapat terlihat profesional.
Sumber : pojoksatu.id
Bayangkan bila navigasi pengguna tersebut tidak tetap atau mengikuti body aplikasi pengguna akan kesulitan untuk menavigasi aplikasi tersebut.
Dari gambar salah satu web site berita pojoksatu.id bagian header dari situs tersebut tidak bergerak saat digeser ke bawah. Hal ini membuktikan dengan menggunakan sticky situs atau blog dapat terlihat profesional.
Untuk mengubah header tersebut menjadi tetap bila di scroll kita menggunakan dua cara. Pertama menggunakan sticky header (kepala lengket) dan yang kedua menggunakan fixed header. Perbedaan cara tersebut bila adalah scriptnya. Bila menggunakan sticky artinya script tersebut memerintahkan elemen tangkapan menjadi tetap. Bila menggunakan fixed header artinya kita akan memodifikasi CSS (Cascading Style Sheets) agar header menjadi fixed (tetap).
Fungsi header tetap tersebut adalah untuk memudahkan user melakukan navigasi blog atau situs terkait. Karena, bila header juga bergerak ke atas saat dibaca atau digunakan artinya user harus kembali lagi ke awal atau ke atas untuk melihat isi dari navigasi header yang ditampilkan dari blog atau situs tersebut.
Fungsi header tetap tersebut adalah untuk memudahkan user melakukan navigasi blog atau situs terkait. Karena, bila header juga bergerak ke atas saat dibaca atau digunakan artinya user harus kembali lagi ke awal atau ke atas untuk melihat isi dari navigasi header yang ditampilkan dari blog atau situs tersebut.
Langkah Pertama Menggunakan Sticky Key;
- Buka akun blogger di browser.
- Sorot ke Theme atau tema. Terdapat dua pilihat yaitu customize dan juga edit HTML. Gunakan edit HTML untuk merubah isi HTML terkait.
- Klik edit HTML untuk mendapatkan bagian yang akan dirubah. Cari keyword sticky di HTML keyword untuk memastikan bahwa unsur sticky sudah ada di HTML tersebut. Bila belum ada lakukan langkah berikut.
Gunakan script berikut untuk membuat tangkapan sticky pada HTML;
<script>
//<![CDATA[
bs_makeSticky("ID 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>
Copy dan gunakan kode tersebut tepat berada di atas </body> atau penutup body. Perhatikan ID HEADER huruf besar dan teks miring tersebut. Bila ID HEADER tersebut tidak di ubah tidak akan terjadi apa-apa. Script tidak berfungsi karena tidak ID elemen yang dapat dikerjakan oleh scripts tersebut.
Langkah terakhir adalah menemukan ID Header. ID Header terpadat di header class sehingga langkah terakhir adalah dengan metode pencarian seperti di awal dengan menggunakan keyword HEADER CLASS. Bila sudah mendapatkan header class lalu cari salah satu id yang tepat sebagai bagian dari header tersebut.
Klik simpan template. Hasilnya dapat dilihat dengan membuka salah satu konten atau lihat blog secara keseluruhan dan kemudian scroll mouse pada tampilan dekstop atau geser ke bawah bila menggunakan tampilan mobile dengan versi android.
Langkah kedua Menggunakan Fixed Header;
- Gunakan metode pencarian di Edit HTML theme dengan keyword #header atau .header, .heder-wrapper atau .header-inner.
- Letak kode tersebut ada pada scripts <style>
.header{
width:100%;
z-index:1000;
position:fixed; /*position pada header menjadi tetap */
height:60px;
background:#252525;
}
width:100%;
z-index:1000;
position:fixed; /*position pada header menjadi tetap */
height:60px;
background:#252525;
}
Bila sudah mendapatkan kode tersebut ubah postition. Terdapat lima position values berbeda setiap build HTML blog diantaranya;
.header{
position: static; atau
position: relative; atau
position: fixed; atau
position: absolute;
sticky
.header{
position: static; atau
position: relative; atau
position: fixed; atau
position: absolute;
sticky
}
Pelajari CSS Layout Position Property
Bila #header atau .header bukan fixed artinya position pada header tersebut harus dirubah. Menggunakan fixed agar position header tetap tidak bergerak saat discroll.
Catatan penting; untuk melakukan trial perubahaan https atau edit html ada baiknya disarankan untuk melakukan priview theme terlebih dahulu atau klik simpan dan kemudian lihat blog. Pastikan bahwa proses edit masih berlangsung tidak perlu klik back.
Pelajari CSS Layout Position Property
Bila #header atau .header bukan fixed artinya position pada header tersebut harus dirubah. Menggunakan fixed agar position header tetap tidak bergerak saat discroll.
Catatan penting; untuk melakukan trial perubahaan https atau edit html ada baiknya disarankan untuk melakukan priview theme terlebih dahulu atau klik simpan dan kemudian lihat blog. Pastikan bahwa proses edit masih berlangsung tidak perlu klik back.
Related Post :
Tags
Infopedia