Membuat Menu Navigasi Floating disamping Blog

Membuat Menu Navigasi Floating disamping Blog

Rio Ilham Hadi

28 February 2014

Cara Membuat Menu Navigasi Floating Keren disamping Blog - Kali ini saya akan memberikan Tutorial, Yang cocok untuk template blog, dengan menu yang sedikit, contohnya Template ''DroidPluss'' Menu Navigasi yang saya berikan ini, 50% mirip sama Menu navigasinya Blog Kang Ismet hanya saja menu ini akan muncul jika di HOVER... @

Demo

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

1. Masuk ke 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"><span><a href="http://blanter-forever.blogspot.com/">&#1769; HOME</a></span></div>
<div class="menuItem dua"><span><a href="http://blanter-forever.blogspot.com/">&#187; Tools</a></span></div>
<div class="menuItem tiga"><span><a href="http://blanter-forever.blogspot.com/">&#187; Tutorial</a></span></div>
<div class="menuItem empat"><span><a href="http://blanter-forever.blogspot.com/">&#187; Social</a></span></div>
<div class="menuItem lima"><span><a href="http://blanter-forever.blogspot.com/">&#187; Kategori</a></span></div>
</div>

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

.

Source : http://blogkrizeer.blogspot.com/2013/08/cara-membuat-menu-navigasi-floating.html

 Jangan Lupa Like dan Share Yaa...

Share This