Membuat Menu Melayang Diatas mengikuti Scrol

Membuat Menu Melayang Di Atas Blog - Halo sobat kembali saya berbagi artikel,
Oke sobat, kali ini saya akan berbagi Tutorial Blog lagi setelah beberapa hari lalu. Singkat waktu, langsung saja yuk sob caranya jika sobat belum tau bentuknya sobat bisa masuk ke DEMO. Sekarang sudah tau kan?? yuk sekarang menuju proses pembuatannya:

Login Blogger
Masuk ke dashboard
Menuju menu template -> Edit Html
Kemudian Masukkan kode dibawah ini tepat diatas ]]></b:skin>

/* Top Menu www.g-bloog.com
----------------------------------------------- */
#top-menuwrapper{background: white;height:60px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #05BEFF}
#top-menuwrap, #top-menuwrap2{width:90%;margin:0 auto}
#top-menu{width:100%}
#top-menu ul{list-style: none;width:100%;}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:20px;padding:5px 0;margin-left:25px;color:#999;font-size:14px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#c94e5c;}
.logo{float:left;font-family:'Montserrat', Oswald;font-size:160%;text-transform:uppercase;font-weight:300;}
#top-menu ul li a.current{color:#c94e5c}
.logo a{color:#fff;text-decoration:none;margin-top:-5px}
.logo a:hover{color:#fff;text-decoration:none}
.logo img{margin-top:0px;}

Kemudian masukkan kode dibawah ini tepat dibawah tag <body>

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<ul>
<li><a href='http://unduhan-mp3.blogspot.com/'>Lagu Gratis</a></li>
<li><a href='http://dagujang.blogspot.com/p/tv-online-indonesia.html/'>TV Online</a></li>
<li><a href='http://www.youtube.com/'>You Tube</a></li>
</ul>
<div class='logo'>
<a href='/'><img alt='Go! Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAUx_t2YmZXE7kh230oyEiHRM4Ub6DPNnIxe-Yicf7b6L_No1M_xljYyu_i9YlH8vpOnUJdFfxM6CkgoKoXbyk-Y7ue3COKdm1XEq-_1x4gVX1QpQ1nVFglotSWpjg4EPhJunSogVobJo/s36/13.gif'/></a>
</div>
</div>
</div>
</div>

Keterangan

Pasti sobat sudah tau apa yang harus diubah, mungkin saya perlu jelaskan lagi ya bagi yang belum tau. Untuk tulisan yang saya stabilo hijau sobat bisa ganti dengan link yang sobat inginkan. Untuk tulisan yang saya stabilo kuning sobat bisa ganti dengan alamat gambar logo blog sobat sendiri. Ingat logo blog sobat harus berukuran 170 x 34 pixel agar terlihat pas dan rapi.

Sekarang simpan. Jika tampilan blog sobat tidak rapi, mungkin ada yang harus sobat otak atik lagi. Mau tau caranya?? yaudah deh saya kasih bonus :D

biasanya menu navigasi melayang ini akan menutupi header blog sobat. bener gak?? kalo bener simak terus nih caranya.

Sobat cari css di blog sobat biasanya penulisannya seperti ini:

#header {............
}

Kemudian sobat tabahkan margin-top:60px; maka akan seperti ini.

#header {margin-top:60px;............
}

untuk "........." maksudnya adalah kode- kode lain yang berada didalamnya.

Sekian artikel yang saya berikan mohon maaf jika artikel yang saya buat ini kurang jelas. Untuk agar lebih terlihat menarik sobat dapat mengotak atik sendiri. Jika ada hal yang ingin ditanyakan tentang artikel ini silahkan komentar dibawah ini ^_^.