Cara Membuat Menu Navigasi Floating Keren diSamping

Cara Membuat Menu Navigasi Floating Keren diSamping

Kali ini saya akan berbagi Cara Membuat Menu Navigasi Floating Keren diSamping atau disebelah samping main wrapper. ala maz-waone yang dipublikasikan kembali oleh yoga-tc.

Menu navigasi ini bisa dipasang di blog anda dan akan berada disamping. menu navigasi ini juga bisa buka tutup lho. caranya cukup mudah juga.

Sebelum mencoba, saya sarankan backup dulu template anda biar ngga terjadi sesuatu yang tidak diinginkan :p

Langsung saja. oke!

- Login Blogspot.com
- Template - Edit Html
- cari kode ]]></b:skin>
Selanjutnya letakan kode berikut tepat diatasnya atau tepat diatas kode ]]></b:skin> 

/* MENU NAVIGASI */
.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;}

 Next. Cari kode </body> letakan kode dibawah tepat diatas kode tadi.

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

Terakhir Save/Simpan template.

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

Cukup mudah bukan? Semoga berhasil dan semoga artikel  yang saya share dengan judul "Cara Membuat Menu Navigasi Floating Keren diSamping" ini bisa bermanfaat. :)