Panduan membuat navbar slide down template blogger

slide down navbar
slide down navbar

Untuk sementara saya belum menemukan padanan kata "Slide Down" dalam bahasa Indonesia untuk navbar yang satu ini. Jadi ceritanya kita melalui ke ajaiban desain HTML, bisa menampilkan dan menyembunyikan navbar berikut menu navigasi blog pada saat scrolling halaman konten blog kita.

Manfaat navbar yang bisa disembunyikan hanya apabila kita ingin membuat halaman yang terlihat sederhana, minimalis dan bersih. Seolah pengunjung tidak merasa terganggu dengan berbagai 'asesories' tampilan blog. Cobalah eksplorasi contoh navigasi yang saya buat di bawah ini.

Trik ini saya utak atik dari halaman w3school, coba deh klik link berikut dan ingat, jika ingin melihat hasilnya jangan lupa klik 'RUN' di atas menu ya...Cobalah klik demo dibawah ini:
DEMO NAVBAR SLIDE DOWN
Kalau kalian sudah klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama.

Seperti biasa, trik ini dapat di terapkan ke tempalte default (bawaan) blogger

1. CSS

  1. Pilih blog untuk diperbarui.
  2. Di menu sebelah kiri, klik Tema.
  3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  4. Cari kode </head>
Letakan kode berikut tepat di atas kode </head>:
<style>
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #0000ff;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
</style>

2. HTML

Masih di halaman editor HTML blogger letakan kode berikut tepat di bawah kode </head> atau <body>:
<div id="navbar">
<a href="#home">SBBS</a>
<a href="#news">Blog</a>
<a href="#contact">Kontak</a>
</div>

3. Javascript

Masih di halaman editor HTML blogger letakan kode berikut tepat di atas <body>:
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
Save Template. Cobalah berlatih di w3school dan CodePen! 

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Oh begitu caranya. Ternyata ga sesulit yang dibayangkan ya. Cuma aku tuh suka takut kalau ngoprek2 html dkk nya hihihihi. Sip2 setidaknya sudah tau deh siapa tau kapan2 mau dipraktekkan. Makasih infonya.

    BalasHapus
    Balasan
    1. ya memang mudah...hanya kadang kita tidak ada waktu membiasakan diri

      Hapus
Lebih baru Lebih lama

Formulir Kontak