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.
2. Dashboard -> Template -> edit HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini tepat di atasnya
5. Selanjutnya cari kode </body>, dan letakan kode dibawah ini tepat di atasnya.
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.
Langkah-langkah
1. Login Blogger2. 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;}
<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>
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
1 blogger-disqus so far
Makasi Fadhil sudah menyimak & mengunjungi blog ini.
silahkan copy codenya di Link Exchange lalu tempel diwb kamu kalo sudah konfirmasi
EmoticonEmoticon