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

Close

33 komentar:

  1. Fahmi Setiawan21 Maret 2012 pukul 01.34

    mantap tutorialnya sob :D

    BalasHapus
  2. BagiBagiBlog21 Maret 2012 pukul 04.07

    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
  3. Dextoshare21 Maret 2012 pukul 21.06

    @Fahmi Setiawanmksih mas bro...:D

    BalasHapus
  4. Dextoshare21 Maret 2012 pukul 21.07

    @BagiBagiBlogoke2 mksih yas,,,:D

    BalasHapus
  5. The7Bloggers23 Maret 2012 pukul 05.03

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

    BalasHapus
  6. Dextoshare23 Maret 2012 pukul 22.32

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

    BalasHapus
  7. The7Bloggers24 Maret 2012 pukul 17.26

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

    BTW berkunjung menunggu postingan terbaru?

    BalasHapus
    Balasan
    1. Dextoshare25 Maret 2012 pukul 03.19

      iyaaaaaaaaaa

      Hapus
    2. Sifat Googlebot Yang Patut Ditiru | The7Bloggers25 Maret 2012 pukul 22.18

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

      Hapus
    3. Dextoshare26 Maret 2012 pukul 07.51

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

      Hapus
  8. Mr.Randy25 Maret 2012 pukul 11.17

    wah mana nih contohnya?liat dong

    BalasHapus
    Balasan
    1. Dextoshare25 Maret 2012 pukul 16.50

      cry2 ren,,dmona liat msing2 lo dh di prktekin,,,wkwkwkkw

      Hapus
    2. Mr.Randy25 Maret 2012 pukul 20.58

      wkwwk oke lah mantaps deh tutorialnya

      Hapus
    3. Dextoshare26 Maret 2012 pukul 08.10

      siipp sbat,,,piss y,:D

      Hapus
  9. ladidacafe26 Maret 2012 pukul 14.28

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

    thanks infonya yak..

    BalasHapus
    Balasan
    1. Dextoshare26 Maret 2012 pukul 15.12

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

      Hapus
  10. Mr.Randy29 Maret 2012 pukul 01.18

    wah gan belum diapdet2 yah?

    BalasHapus
  11. Beben Koben30 Maret 2012 pukul 02.05

    mantab blognya euy \m/

    BalasHapus
    Balasan
    1. Dextoshare30 Maret 2012 pukul 22.10

      wkwk kang beben,,mksih tas suprtya..blog akang lbih kerenn..

      Hapus
  12. Mitos2 April 2012 pukul 08.43

    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
  13. Ф дфѕдғфдғ Ф3 April 2012 pukul 17.13

    mantapp juga nihh :P

    BalasHapus
  14. pino5 April 2012 pukul 18.07

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

    BalasHapus
  15. Rudy Azhar5 April 2012 pukul 23.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. Dextoshare5 April 2012 pukul 23.21

      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
  16. TORAYASURABAYA21 April 2012 pukul 15.55

    Mantapp juga nih..

    BalasHapus
  17. naturalzine8 Mei 2012 pukul 18.27

    apa kabar sobat, lama tak bersua..hoho

    BalasHapus

Dexto Share™ © 2022

Pemberitahuan

Saat Ini Saya Juga Aktif Di Dextozine

Terimakasih