Cara Membuat Menu Navigasi Floating Keren disamping Blog

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, saya dapatkan floating menu navigasi ini dari MazWaone. Oke langsung saja ke pembahasannya.

Pastikan sebelum mencoba tutorial ini, lebih baik back up dulu template sobat !, gk tau back up template ?, cari aja di google.

1. Login Blogger

2. Dashboard -> Template -> edit HTML

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

4. Letakan kode dibawah ini tepat di atasnya

/* MENU NAVIGASI (FLOATING) Blog Krizeer */
.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://yoga-tc.blogspot.com/">Aku</a></span></div>
<div class="menuItem dua">2<span><a href="http://yoga-tc.blogspot.com/">Suka</a></span></div>
<div class="menuItem tiga">3<span><a href="http://yoga-tc.blogspot.com/">Sama</a></span></div>
<div class="menuItem empat">4<span><a href="http://yoga-tc.blogspot.com/">Kamu</a></span></div>
<div class="menuItem lima">5<span><a href="http://yoga-tc.blogspot.com/">Problem ?</a></span></div>
</div>

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

Demo : http://demo-anak-layangan.blogspot.com/

Tweet

Unknown pada 8/14/2013