Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Membuat header blog hilang/muncul saat di scroll

views

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

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.