Image & Snippet
♠ » Membuat Show Hide Navbar Dengan Animasi Dan CSS ‹ ›

Membuat Show Hide Navbar Dengan Animasi Dan CSS

Ternyata sudah cukup lama saya tidak post,,ya dikarnakan sibuk???heheh,,
baik kali ini,saya akan post tentang Show Hide Navbar dengan Animation ini mungkin akan menjadi jalan tengah bagai beberapa sobat blogger yang tidak suka navbar ikutan nongol di halaman blog.Dengan menggunakan CSS3, kita akan membuat navbar tersembunyi (hilang) dan akan nongol lagi ketika cursor diarahkan pada satu titik tertentu.Tentu saja desain ini telah kita rancang secantik mungkin sehingga penampilan blog tetap terjaga.Dengan menyertakan kode CSS3 Transition, maka sebuah bentuk animasi gerak memungkinkan navbar sembunyi dan nongol dengan cara yang halus.Saat blog dibuka navbar tidak akan terlihat. Di bagian atas blog (top bar) hanya akan terlihat sebuah image (gambar) yang kita gunakan sebagai "semacam swith" pembuka navbar. Saat cursor menyentuhnya, maka secara perlahan-lahan "si navbar" terlihat turun untuk memperlihatkan diri.Untuk menghilangkan navbar tersebut cukup lakukan dengan melepaskan cursor dari semua bagian navbar.Secara perlahan dia akan kembali hilang untuk bersembunyi di bagian atas blog.Buat Para master mungkin tidak asing lagi,,tapi ini buat para pemula seperti saya cntohnya,,:D


Langkah Nya
1.Login di blogger Anda
-Masuk ke Dasbor
-Pilih Tata Letak / Rancangan Dan Edit HTML
-Klik "Expand Template Widget"
-Jangan lupa untuk memback-up template anda terlebih dahulu

2.Cari kode

<body>

Setelah ketemu Taruh/paste kode dibawah ini tepat di atasnya.

#navbar-iframe {
height: 30px;
padding-bottom: 30px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4UKTBVdCuo0z-zZxpUwjwBm7ug-LvcLUbIaIihlauk0GmccYaK8qWSWatB386nDo9lxEGMHUpOcDn7FWvRALgwpjh00cISmGgg6BJwV8hl72opeO3QcIkM_MfxnoKwnWrnLNnSj03e4x/s1600/dextoshare.gif) bottom right no-repeat;
background-position: 99.5% 30px;
position: absolute;
margin-top: -30px;
-o-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-webkit-transition: all 1.5s ease-in;
}
#navbar-iframe:hover {
margin-top: 0px;
cursor: pointer;
}

3.Pada langkah terakhir Simpan

Dexto Share™ © 2022

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih