Tuesday 10 December 2013
- 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://gbloog-project.blogspot.com/'>Games</a></li>
<li><a href='http://gbloog-project.blogspot.com/'>Contact</a></li>
<li><a href='http://www.g-bloog.com/p/privacy-policy.html'>Privacy</a></li>
</ul>
<div class='logo'>
<a href='/'><img alt='Go! Blog' src='http://i.imgur.com/VoSrLdK.png'/></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 ^_^.
17 comments
Ini yg ane cari dan nga tau gimana cara buat nya :'(
thanks rul :D
siip.. :) !!
Njir Baru Keluar Sekarang :v
ya sob saya sibuk, sedang menghadapi ulangan semester :D
kalo untuk widget itu gmna ya bang??
ijin follow bang
ditunggu follbacknya
Widget yg mana?
Sob kalau tidak ada code < body > harus simpan di dong :'(
pasti ada sob -_- cmn stiap template ada penulisan yg berbeda coba cari <body aja
Keren :D
Kunjungi back :D http://ar-hunterz.blogspot.com/
oke sob udah ketemu tanks informasi ya tentang navigasi melayang
cara buat menu navigasi langsung keluar saat udah diturunin scrollnya gimana?
kalo itu saya kurang tau. maksud ente kalo diatas skali navigasinya gak muncul dan setelah discroll kebawah langsung muncul navigasinya kan??
Keren Nih Kayaknya ,, Ijin Coba Gan :D
keren gan menu nya!
blog ini sudah saya follow! follow back ya di http://lzmodern.blogspot.com
Rul Pas Komentar Itunya Kok Ketutub Rul ?
Kasih Tau Donk Rul
ijin coba kakak farul :D
Sudah Di Pasang Min
cek>>http://gameunyil.blogspot.com
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog