Menu Navigasi Floating di Samping Kiri atau di Kanan - Sesuka hati anda saja,
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, saya dapatkan floating menu navigasi ini dari
MazWaone. Oke langsung saja ke pembahasannya.
Pastikan sebelum mencoba tutorial ini, lebih baik back up dulu template sobat !, gk tau back up template ?, cari aja di google.
1. Login 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">1<span><a href="http://yoga-tc.blogspot.com/">Aku</a></span></div>
<div class="menuItem dua">2<span><a href="http://yoga-tc.blogspot.com/">Suka</a></span></div>
<div class="menuItem tiga">3<span><a href="http://yoga-tc.blogspot.com/">Sama</a></span></div>
<div class="menuItem empat">4<span><a href="http://yoga-tc.blogspot.com/">Kamu</a></span></div>
<div class="menuItem lima">5<span><a href="http://yoga-tc.blogspot.com/">Problem ?</a></span></div>
</div>
6. Klik Pratinjau terlebih dahulu sebelum disimpan/save, Jika tidak terdapat error klik save/simpan.
Demo : http://demo-anak-layangan.blogspot.com/
Artikel Keren Lainnya:
Sudah Saya Follow Back mas .. ^^ :) dari www.mafiasitez.blogspot.com
BalasHapusmakasih sob cheer
HapusYoo . . Sama-sama sob . . Sobat , boleh gak? Template hasil Re-Design saya di share disini . . :)
Hapusmana coba saya lihat demonya, klo oke sih bisa, tapi klo masih berantakan, maaf ya :-d
HapusBentar ya sob :)
HapusCoba kesini sob => http://mafiasitez.blogspot.com/2013/01/simple-handly-blogger-template.html
Hapusboleh-boleh sob, tapi nanti jam 5 sore atau besok pagi ya, sekarangnya saya lagi ada urusan 8-)
HapusOke Sob , saya juga lagi memperbaiki tampilan homepage di mafiasitez . . nih lagi design ulang lagi :p
Hapusoke sob, sebenarnya saya gk ada urusan, cuman mau main games Lost Saga, hehe :-d dari tadi lagger terus ;((
Hapusnice template sob..
BalasHapusakisada-ryo.blogspot.com
makasih kunjungannya sob, blog sobat sudah saya follow, follow back nya ditunggu ya :>)
HapusMantep dwehhhhhhh
BalasHapushttp://masgober.blogspot.com :-b :D
makasih sob :-#
Hapusbanyak yang mirip dengan tutor di Maz-waone.. :D
Hapusemang kode CSSnya dari blog itu :-#
HapusBlognya sudah saya follow sob, ditunggu ya follow backnya (o)
BalasHapusmakasih sob, blog sobat juga sudah saya follow back :>)
HapusThank infonya sobat!! mongo visitback blog ane (h)
BalasHapuswww.asfa-id.blogspot.com
sama-sama sob, blognya sudah saya visit :>)
Hapusthanks gan :)
BalasHapussaya sudah follow blog ini, jangan lupa follow back ya :)
sama-sama gan, blog sobat sudah saya follow back :>)
Hapussangat bermanfaat nih post nya suatu saat nanti bisa berguna...
BalasHapuslink direct nya nih sobb http://suatudunianew.blogspot.com/2013/03/dowload-blogger-template-mas-sugeng.html
sama-sama sob, tapi itu link downloadnya error, tolong di upload ulang di 4shared ya (yang originalnya)
HapusDOWNLOAD XXX NURS AND DOCTOR 100% WORKING HENTAI SEX GAME FOR ADULTS 18+ CLICK HERE TO DOWNLOAD
BalasHapusDOWNLOAD SEDUCE ME SEX ADULT PC GAME 18+ CLICK HERE TO DOWNLOAD
mantap gan
BalasHapussippppp .......... dehhhh
BalasHapus