Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagiamana caranya membuat header blog turn naik saat di scroll keatas dan kebawah
Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Remove Header
Jika kamu penasaran dengan sebuah blog yang memiliki header blog bisa ke atas dan kebawah secara otomatis saat di scroll, sebenarnya header blog tersebut di hilangkan dengan mengubah ketinggian blog serta mengubah posisi header, menggunakan kode javascript, dalam artian lain penyebutan header keatas dan kebawah saat di scroll adalah bagaimana cara menghilagkan header blog saat di scroll menggunakan kode javascript
Menggunakan Javascript
Seperti yang sudah admin jelaskan sebelumnya bahwa untuk membuat header blog meghilang saat di scroll ke bawah dan muncul saat di scroll keatas adalah dengan menggunakan kode javascript sebagai kode dasar dan utama dalam membuatnya
Setting with CSS
Meskipun kode dasar dan utama dalam membuat header blog hilang muncul saat di scroll tersebut menggunakan kode javascript namun, perlu di ketahui bahwa untuk mengatur hilang dan munculnya header tersebut adalah dengan menggunakan kode CSS, yakni mengatur ketinggian posisi header saat di scroll agar header blog seolah olah menghilang namun nyatanya header blog hanya di sembunyikan pada posisi yang berbeda
Header Melayang
Ingat sob jika lu ingin membuat header blog lu bisa menghilang dan muncul saat di scroll, header blog lu itu harus lah menggunakan mode melayang alias sticky, jika enggak, lu pelajari lagi bagaimana caranya membuat header blog sticky atau membuat header Blog melayang, baru lu bisa kembali lagi kesini untuk membaca artikel gua
Contoh Tampilan
Jika kamu penasaran bagaimana kah contoh tampilan dari header blog bisa hilang muncul saat di scroll silahkan periksa menggunakan tombol di bawah ini
Info: Bagaimana sobat luar biasa keren yak 🥰
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat header blog hilang muncul saat di Scroll menggunakan Script terbaru dan paling dipercaya oleh miliaran orang di dunia haha, lebay yak 😱
Kode Javascript
Langsung aja tanpa basa basi lagi silahkan salin kode javascript di bawah ini, kemudian letakkan di atas kode </body>
<script>/*<![CDATA[*/
// by rahperfect
var _0x5f3e=["\x70\x61\x67\x65\x59\x4F\x66\x66\x73\x65\x74","\x6F\x6E\x73\x63\x72\x6F\x6C\x6C","\x72\x61\x68\x6B\x65\x72\x65\x6E","\x72\x65\x6D\x6F\x76\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x68\x65\x61\x64\x65\x72","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x61\x64\x64"];var prevScrollpos=window[_0x5f3e[0]];window[_0x5f3e[1]]= function(){var _0x2cc5x2=window[_0x5f3e[0]];prevScrollpos> _0x2cc5x2?document[_0x5f3e[6]](_0x5f3e[5])[_0x5f3e[4]][_0x5f3e[3]](_0x5f3e[2]):document[_0x5f3e[6]](_0x5f3e[5])[_0x5f3e[4]][_0x5f3e[7]](_0x5f3e[2]),prevScrollpos= _0x2cc5x2}
/*]]>*/</script>Info: Jan di edit {udah responsive} jika lu edit entar gak berfungsi lu punya header blog sesuai keinginan lu, yak 😱
Kode CSS
Selanjutnya tambahan kode CSS dibawah ini dan kamu bisa menaruhnya tepat diatas kode ]]></b:skin>
header.rahkeren{top:-85px}Info: Bagaimana sedikit sekali kodenya yak 🤣, oh btw jika sudah simpan lu punya template
Penjelasan kode
Baiklah sedikit gua jelasin mengenai cara membuat header blog hilang muncul saat di scroll, yang pertama kode javascript yang gua jabarkan di atas harus lu pasang, jika enggak ya...entahlah.. lanjut yang kedua, pada kode CSS jika pada saat kamu meyimpan template namun header blog masih aja bandel alias tidak berfungsi turun naik saat di scroll, cocokkan saja class, header lu, karena setiap class dan id header blog itu berbeda beda sob, coba aja sampai bisa, oke semoga bermanfaat