Wednesday, 8 August 2012

Cara Menambahkan Animasi Pada Navbar


Hello Sobat Blogger, kali ini Saya akan memberikan Tips yaitu "Cara Menambahkan Animasi Pada Navbar". Seperti yang Kalian lihat pada gambar di atas, atau pada Blog ini, Navbarnya berisikan Animasi. Bagaimana, Kalian tertarik...? kalau tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan -- > Edit HTML.
[3]. Kalau sudah, cari Code body {.
[4]. Kemudian Copy dan Paste-kan Code di bawah ini tepat di ATAS Code body {.
A. Untuk Navbar Yang Normal.
#navbar-iframe {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzQl9Rp2skK3wyAHpQYrOCvBf4NQZqzKhFO8czOa7W5bPqC7Rm5kXo78F-tb1Y0l8z7OeQKvPrA2eCsjWLpYIgaavMg8wKbHlGfMhNHzkEUS3kAcET8pud6dSPw0knQX2A-AkUqdukMA/s1600/1b.gif) center repeat;}
B. Untuk Navbar Yang Show Hide.
#navbar-iframe{opacity:0;-moz-opacity:0;filter:alpha(Opacity=0);background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzQl9Rp2skK3wyAHpQYrOCvBf4NQZqzKhFO8czOa7W5bPqC7Rm5kXo78F-tb1Y0l8z7OeQKvPrA2eCsjWLpYIgaavMg8wKbHlGfMhNHzkEUS3kAcET8pud6dSPw0knQX2A-AkUqdukMA/s1600/1b.gif) center repeat;}
#navbar-iframe:hover{opacity:0.4;-moz-opacity:0.4;filter:alpha(Opacity=40);}
/* General
*/
KETERANGAN :
* Tulisan yang berwarna Biru, adalah URL Gambar Animasinya. Kalian bisa menggantinya dengan Gambar Animasi yang Kalian suka.
* Dan jika di atas Code body { ada Code yang seperti di atas, hapus saja Codenya dan ganti dengan Code di atas.

[5]. Terakhir, tinggal di SAVE dan lihat hasilnya.

No comments:

Post a Comment