Membuat menu dibawah atau diatas header |
Cara membuat menu diatas header atau di bawah header
1. Template > Edit HTML jangan lupa back up template
2. Cari/Temukan (CTRL+F) kode ]]></b:skin>
3. Simpan kode berikut ini diatas kode tersebut
Sebelumnya kita lihat dulu panjang header blog kita agar tampilan menu rapi.
caranya klik blog milik kita dan kemudian klik kanan di header blog milik kita lalu klik inspect elemen. klik <header>. ok selesai
/*Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 940px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#ff0000;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#222222;}
#navbar-iframe {display: none !important;}
4. Cari/Temukan (CTRL+F) kode <body> atau bisa juga dibawah header
5. Simpan kode berikut ini dibawah kode tersebut
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://zunti.blogspot.co.id/' title='Menu'>Top Menu</a></li>
<li><a href='http://zunti.blogspot.co.id/' title='Contact'>Contact</a></li>
<li><a href='http://zunti.blogspot.co.id/p/disclaimer-for-zunti-if-you-require-any.html/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://zunti.blogspot.co.id/' title='Privacy Policy'>Privacy Policy</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
klik simpan template
ok. kita coba lihat hasil nya
untuk di bawah header cukup ulangi dari nomor 5.
jangan lupa edit kodenya sesuai keinginan anda.
5. Simpan kode berikut ini dibawah kode </header>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://zunti.blogspot.co.id/' title='Menu'>Top Menu</a></li>
<li><a href='http://zunti.blogspot.co.id/' title='grup'>grup</a></li>
<li><a href='http://zunti.blogspot.co.id/' title='kelompok baru'>PKelompok baru</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
jangan lupa simpan template
file dapat di download di
https://docs.google.com/uc?export=download&id=0B-p0CYANJ-GOM0s5bDRYZ241UzA
warna
hijau = #00ff00
kuning = #ffff00
merah = #ff0000
biru = #0000ff
hitam = #000000 atau #222222
abu-abu = #666666
ok semoga bermanfaat. bye...
kenapa engga bisa menyimpan ya HTMLnya..ketika nyimpan lama sekali...dan ketika dibuka blognya sama saja tidak ada perubahan
ReplyDelete