Simple Menu Navigasi Floating

Simple Menu Navigasi Floating - 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. Oke langsung saja ke pembahasannya.

Langkah-langkah

1. Login Blogger
2. Dashboard -> Template -> edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini tepat di atasnya

/* MENU NAVIGASI (FLOATING) shaggyweb.blogspot.com */.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/">Home</a></span></div><div class="menuItem dua">2<span><a href="http://shaggyweb.blogspot.com/">About</a></span></div><div class="menuItem tiga">3<span><a href="http://shaggyweb.blogspot.com/">Sitemap</a></span></div><div class="menuItem empat">4<span><a href="http://shaggyweb.blogspot.com/">Profile</a></span></div><div class="menuItem lima">5<span><a href="http://shaggyweb.blogspot.com/">Contact</a></span></div></div>

6. Klik Pratinjau terlebih dahulu untuk melihat perubahan sebelum disimpan/save, Jika tidak terdapat error klik save/simpan. Setelah itu klik lihat blog anda jika mengikuti dari awal maka Menu Navigasi Floating akan muncul disamping kiri halaman web/blog anda.

Untuk melihat demonya silahkan anda klik tombol demo di bawah ini.

DEMO Navigasi Floating

Sekian postingan dari saya semoga postingan ini dapat bermanfaat bagi anda semuanya.

JUST HAPPY CODE & HAPPY SHARING