Translate

Monday, October 26, 2015

Cara membuat menu diatas header atau di bawah header

Cara membuat menu diatas header atau di bawah header
Membuat menu dibawah atau diatas header
Menu pada sebuah situs tentu mempermudah para pengguna internet dalam melihat isi dari sebuah situs. tampilan menu pada sebuah situs sangat penting pada sebuah blog. Berikut cara membuat menu diatas header atau dibawah header yang sederhana. (untuk mempermudah silahkan Lihat Video )

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...

1 comment:

  1. kenapa engga bisa menyimpan ya HTMLnya..ketika nyimpan lama sekali...dan ketika dibuka blognya sama saja tidak ada perubahan

    ReplyDelete