Image & Snippet

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

Close

33 komentar:

  1. Navbar blog kalo dibikin Show Hide apalagi kalo ditambah efek transtition gitu jadi tampak... MANTAAAFFF BANGEEET yach!!!
    Jadi gak sampek mengganggu pandangan Mata pembaca... solusi yang SUPER!!!
    I Like it Sobat...
    ^_^

    BalasHapus
  2. @BagiBagiBlogSetuju bnget yas, wkwkwkwk em tapi yang paling baik ntu di buang ajah tuh navbar....? Wkwkwkwk

    BalasHapus
  3. @The7Bloggersiya yng sperti sya lkukn jg ce,,mndng d buang,,tp ini y skdar solusi yng tdk ingn mmbuang,,

    BalasHapus
  4. @MiftachudinMif mif, hehehehehe emang knapa ya kok di kasih navbar? mending kyak WP gituh?

    BTW berkunjung menunggu postingan terbaru?

    BalasHapus
    Balasan
    1. Hahahahaha thanks mif, udah berkunjung. Jgan lupa berkunjung lagi. BTW nih homepagenya dapet desain dari template bang andre bukan? hehehehe

      Hapus
    2. yaps home page na bkin g bsa tdr,,jd w dsing j,,wkwkwkwk

      Hapus
  5. wah mana nih contohnya?liat dong

    BalasHapus
    Balasan
    1. cry2 ren,,dmona liat msing2 lo dh di prktekin,,,wkwkwkkw

      Hapus
    2. wkwwk oke lah mantaps deh tutorialnya

      Hapus
  6. navbar bisa dikreasikan jadi keren yak, ehehee...
    tapi saya lebih suka menghapus navbar ^^

    thanks infonya yak..

    BalasHapus
    Balasan
    1. iya mksh atas opsinya gan,,saya pn sama lbh suka mnghpusnya..tp y ini buat yng suka navbar.dan ingn mngkreasikan.:D

      Hapus
  7. Balasan
    1. wkwk kang beben,,mksih tas suprtya..blog akang lbih kerenn..

      Hapus
  8. Waw template nya keren banget ini... :D numpang belajar ya gan. ane kurang faham nih gimana implementasi nya show hide navbar pake animasi gt.. malah lebih nyaman ikutin bawaan template heheheh

    BalasHapus
  9. waahh... bgus sekali, mksih y infonya
    salam kenal... jgn lp berkunjung jg ke blogku y hhehe
    *promosi xiixiixii XD

    BalasHapus
  10. Biar bagaimanapun suatu tips atau trick butuh sebuah contoh, kira-kira bisa kita lihat apakah tips tersebut pantas dipasang atau tidak.

    BalasHapus
    Balasan
    1. haduuhh mati q,,mas rudi 5f g ada demo nya,,y2 nti kdepannya saya ksih demo,,mksih tas kritik n satannya mas,,,salam:D

      Hapus
  11. apa kabar sobat, lama tak bersua..hoho

    BalasHapus

Dexto Share™ © 2022

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih