Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Show - Hide Navbar with Animation using CSS3: Cara Menhilangkan Navbar Blogspot

Show Hide Navbar with 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 (tidak sruntal-sruntul kayak kalian, he ... he ...!). 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 pulang untuk bersembunyi ke habitatnya semula di di bagian atas blog. Sampeyan bisa coba melihat DEMO-nya dengan KLIK link di bawah ini. Carilah di bagian atas blog sebuah gambar (image) yang bertuliskan "Navbar (bertanda -panah-)".


Kode CSS

#navbar-iframe {
height: 30px;
padding-bottom: 30px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/navbar.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;
}

body {margin: 0;padding: 0;border: 0; ... dst; }

Cara menggunakan Show Hide Navbar

  • Login : Login to BloGGeR (Login ke BloGGeR).
    • Masukkan/tuliskan "User Name" atau "Nama Pengguna". Sampeyan bisa juga menggunakan "Email Address".
    • Tuliskan "Password" atau "Sandi".
    • KLIK Login. Tunggu beberapa saat hingga sebuah window baru yang berupa halaman "dasboard" terlihat.
  • Dasboard (Dasbor) : Beberapa link akan ditampilkan, pilih dan KLIK link "Design" atau "Rancangan" (sebelumnya dikenal sebagai "Tata Letak" atau "Layout". Tunggu kembali untuk beberapa saat.
  • Design (Rancangan) : Bagian Design atau Rancangan yang akan terlihat adalah "Page Elements" atau "Elemen Laman". Halaman ini ditandai dengan terlihatnya beberapa kolom yang berisi box dan merupakan pola dasar desain blog sampeyan. (akan terlihat beberapa kotak (box) dengan garis terputus-putus). Lanjutkan dengan KLIK link "Edit HTML".
  • Sampeyan akan melihat banyak kode HTML. Cari kode (tag) body yang letaknya di bagian atas template. Bentuknya kira-kira seperti yang terlihat di kode CSS. Jika sulit untuk mencarinya, silahkan buka tutorial tentang cara cepat mencari kode HTML yang terletak di Special Tutorials di sebelah kiri blog!.
  • Copy kode CSS kemudian pastekan tepat di atas kode (tag) body.
  • KLIK "SAVE Templates" atau "Simpan Template".
  • Buka blog untuk melihat tampilan baru Navbar sampeyan.



Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :








» Happy Blogging - gubhugreyot «


Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot