a cool way to have floating navigation menu button aka menu navigasi melayang

Menu Navigasi Floating di Samping Kiri atau di Kanan - Sesuka hati anda saja, floating menu disamping ini memang tampak sangat keren, dan banyak disukai para Blogger, namun sulit untuk dibikin responsive, klo sobat memakai CSS responsive, floating menu navigasi ini tidak akan muncul, karena blog yang sudah memakai CSS responsive template, sudah dirancang sedemikian rupa supaya bisa cukup di layar apapun.

Pastikan sebelum mencoba tutorial ini, lebih baik back up dulu template sobat !

1. Login Blogger

2. Dashboard -> Template -> edit HTML

3. Cari kode ]]></b:skin>

4. Letakan kode dibawah ini tepat di atasnya

/* MENU NAVIGASI (FLOATING) idenyasiapa */
.menu {text-shadow:none;position: fixed;height: 100%;width: 65px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 220px;}
.menuItem span {position: absolute;left:80px;top:20px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}

5. Selanjutnya cari kode </body>, dan letakan kode dibawah ini tepat di atasnya.

<div class="menu">
<div class="menuItem satu">1<span><a href="http://idenyasiapa.blogspot.com/">Aku</a></span></div>
<div class="menuItem dua">2<span><a href="http://idenyasiapa.blogspot.com/">Suka</a></span></div>
<div class="menuItem tiga">3<span><a href="http://idenyasiapa.blogspot.com/">Sama</a></span></div>
<div class="menuItem empat">4<span><a href="http://idenyasiapa.blogspot.com/">Kamu</a></span></div>
<div class="menuItem lima">5<span><a href="http://idenyasiapa.blogspot.com/">Tolak or terima ?</a></span></div>
</div>

6. Klik Pratinjau terlebih dahulu sebelum disimpan/save, Jika tidak terdapat error klik save/simpan.

Technorati Tags: floating menu,menu melayang

This work is licensed under a Creative Commons license.

Coba yang baru disini .......................