Cara Membuat Floating menu

Posted by : Unknown November 12, 2013

Cara Membuat Floating menu atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, apakah berbeda? yahh jelas sama dong sob..., yang membedakan hanyalah desain penampilanya saja tapi kegunaanya tetap sama kok.!

jika kalian pada bingung ini adalah sreenshotnya:

Oke langsung aja Caranya:

Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin> .

/* Floating Menu */
#ki_floating_menu{background-color: #1484CE;background: #1484ce;background: -moz-linear-gradient(top,  #1484ce 0%, #1274b5 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1484ce), color-stop(100%,#1274b5));background: -webkit-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -o-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: -ms-linear-gradient(top,  #1484ce 0%,#1274b5 100%);background: linear-gradient(to bottom,  #1484ce 0%,#1274b5 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1484ce', endColorstr='#1274b5',GradientType=0 );border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 2px 0 #0E5A8C;box-shadow: 0px 2px 0px #0e5a8c;height:34px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #2a8fd2;}
#ki_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ki_floating_menu ul li{float:left}
#ki_floating_menu ul li a{line-height:34px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;border-right: 1px solid #1470ad;border-left:1px solid #2a88c6;}
#ki_floating_menu ul li a:hover{background-color:rgba(255,255,255,0.125);color:white;}

Ganti 970px untuk ukuran blog sobat.
Ganti 34px untuk ukuran lebarnya

Untuk mendeklarasikannya, simpan kode ini di bawah </head>

<!-- Floating Menu-->er
<div id='ki_floating_menu'>
<ul>
  <li style='border-left:1px solid rgba(30, 30, 30, 0.125);'><a href='/'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh57VZ33kSy1IRSGGjFrSk5OaH2W1juYdABw3gR10LqHNHuNiy8EsEXDlbVP9VcBta62n75ArKDQlabZzWk-bpcd40UuLLtXZ6EtXicCRZSP3GZ9rjmtbakf6HEUgQQ7gQQXOlmVXHQGI/s1600/home.png' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>