DTE :]

Tuesday, October 11, 2011

Autohide Navbar Blogger dengan CSS Transisi

auto hide navbar


Untuk membuat efek transisi yang lembut pada pemunculan navbar seperti pada halaman demo, pertama-tama masuklah ke halaman editor HTML templatemu, kemudian kamu cari kode dengan selektor yang tampak seperti ini:

#navbar-iframe {
  ...
  ...
  ...
}

Tidak usah pedulikan deklarasi-deklarasi yang dituliskan di dalamnya, langsung hapus saja kode tersebut kemudian ganti dengan kode ini:

#navbar-iframe {
  position:absolute;
  top:0;
  padding-bottom:7px;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

#navbar-iframe:hover {
  visibility:visible;
  opacity:1;
}

Klik Simpan Template.

Labels: ,

1 Comments:

Post a Comment



<< Home