Sabtu, 14 Desember 2013
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 ^_^.
{ 2 Komentar... read them below or Comment }
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
woi lu dasar anak SD copy paste gak pake sumber!
BalasHapusSory Gan Soalnya Gua Lupa
BalasHapus