Membuat Menu Navigasi Floating 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/">۩HOME</a></span></div>
<div class="menuItem dua"><span><a href="http://blanter-forever.blogspot.com/">»Tools</a></span></div>
<div class="menuItem tiga"><span><a href="http://blanter-forever.blogspot.com/">»Tutorial</a></span></div>
<div class="menuItem empat"><span><a href="http://blanter-forever.blogspot.com/">»Social</a></span></div>
<div class="menuItem lima"><span><a href="http://blanter-forever.blogspot.com/">»Kategori</a></span></div>
</div>

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

Saturday, 14 June 2014