Cara Membuat Menu Navigasi Floating Keren Disamping Blog

menu navigasi yang diatas header atau dibawah header mah sudah banyak yang pakai.. gimana kalau kita membuat menu navigasi floating keren disamping blog demo nya bisa lihat DISINI 
nah.. keren bukan ? jika tertarik langsung saja yuk.. ehh tunggu dulu kayak nya gak support untuk template yang responsive deh.. eh biarin aja deh ane gak tau hehe :D dicoba aja kalau bisa ya bagus kalau gagal ya hiraukan saja hehe

ini langkah-langkah nya untuk membuat menu navigasi floating keren disamping blog

• login blogger
• template
• backup template terlebih dahulu
• edit html
• masukan kode berikut diatas ]]></b:skin>

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

• sekarang cari kode </body> dan masukan kode berikut diatas kode </body>

<div class='menu'><div class='menuItem satu'>1<span><a href='http://culkiboy.blogspot.com/'>Game</a></span></div><div class='menuItem dua'>2<span><a href='http://culkiboy.blogspot.com'>Tutorial</a></span></div><div class='menuItem tiga'>3<span><a href='http://culkiboy.blogspot.com'>Template</a></span></div><div class='menuItem empat'>4<span><a href='http://culkiboy.blogspot.com'>Tools</a></span></div><div class='menuItem lima'>5<span><a href='http://culkiboy.blogspot.com'>Anime</a></span></div></div>

• keterangan

edit kode yang berwarna merah sesuka hati sobat 
langkah terakhir klik simpan template 
selamat mencoba ^_^