Membuat Effect Pada Navbar

Berbagai artikel blog yang ada di internet berbicara bagaimana menampilkan atau menghilangkan navbar. Kali ini kita akan bereksplorasi tentang bagaimana membuat effect pada navbar ketika cursor mouse diarahkan ke navbar. contoh lihat Demo Navbar

Lakukan langkah berikut ini.

• Masuk ke Design / Rancangan
• Klik di bagian Edit HTML

untuk lebih mudah mengetahui dimana kode script ini dipasang , lihat gambar dibawah ini

selanjutnya copy-paste script berikut ini ditempat seperti gambar diatas tadi.

#navbar-iframe{
display:block;
position:center;
bottom:10pt;
left:10pt;
opacity:0.1;
-o-transition:opacity 1s ease-in;
-moz-transition:opacity 1s ease-in;
-webkit-transition:opacity 1s ease-in;
filter:alpha(opacity=20);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-moz-box-shadow:0 0 40px #aaa7a4;
-webkit-box-shadow:0 0 40px #aaa7a4;
box-shadow:0 0 40px #aaa7a4;
}
#navbar-iframe:hover{
opacity:1.0;
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-box-shadow:0 0 40px #aaa7a4;
-webkit-box-shadow:0 0 40px #aaa7a4;
box-shadow:0 0 40px #aaa7a4;
}

simpan template yang telah anda edit tersebut dan lihat hasilnya.