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:
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>
- 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 ^_^.
Post a Comment
terima kasih atas komentarnya