Membuat Menu Navigasi Floating Keren Di Samping Blog

Unknown

Tutorial, Widget

Minggu, 09 Maret 2014

12 Komentar

Membuat Menu Navigasi Floating Keren Di Samping Blog - Pada umumnya template blog sudah terdapat menu navigasi yang berada di atas atau dibawah header, tetapi menu tersebut terlihat membosankan karena sudah umum digunakan, bagaimana jika menu navigasi terletak pada samping kiri blog dan muncul jika didekatkan dengan pointer mouse? unik bukan?.

Jika tertarik menggunakannya atau hanya sekedar ingin mencoba silahkan ikuti langkah - langkah berikut ini.

Cara membuat menu navigasi floating keren disamping blog

1. Blogger ► Template ► Edit HTML
2. Letakan kode berikut tepat diatas ]]></b:skin> atau </style>

/* 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;}

3. Lalu cari </body> dan letakan kode berikut tepat diatasnya

 <div class="menu">
<div class="menuItem satu">1<span><a href="http://blog.ziantshady.net/">Home</a></span></div>
<div class="menuItem dua">2<span><a href="http://blog.ziantshady.net/">Blogger</a></span></div>
<div class="menuItem tiga">3<span><a href="http://blog.ziantshady.net/">Teknologi</a></span></div>
<div class="menuItem empat">4<span><a href="http://blog.ziantshady.net/">Lifestyle</a></span></div>
<div class="menuItem lima">5<span><a href="http://blog.ziantshady.net/">Lainnya</a></span></div>
</div>

4. Atur sesuai keinginan sobat

Lihatlah hasilnya. Kode CSS diatas masih bisa dimodifikasi lagi sesuai keinginan seperti merubah warna dan ukuran, selamat berkreasi :)

Demo: http://demo-anak-layangan.blogspot.com