Cara Membuat Menu Navigasi Horizontal

Cara membuat menu navigasi horizontal - Nah sebelumnya saya sudah memposting artikel yang sehubungan, yaitu apa / mana yang disebut menu navigasi ? Sobat sudah tahu menu navigasi ... ? Jika belum baca posting ini terlebih dahulu. Nah sudah paham apa yang disebut menu navigasi ... ? Tertarik membuatnya untuk blog sobat ... ? Oke langsung ke TKP ...

1. Dasbor > Rancangan / Layout

2. Ke Edit HTML, " download template lengkap " terlebih dahulu untuk mencegah apabila terjadi kesalahan

3. Copy kode dibawah ini


/*-- Nav --*/
#nav {
width:980px;
float:center;
background:#821818 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S9Ihr-pTe9I/AAAAAAAADjs/04jHwZSVwn8/red%20nav_thumb%5B2%5D.jpg) repeat-x;
height:40px;
border-top:1px solid #646464;
padding:0;
margin:10px 0 5px 0;
border: 1px solid rgb(204, 204, 204);
-moz-border-radius: 5px 5px 5px 5px
}

#nav-left {
float:left;
display:inline;
width:680px;
}

#nav-right {
float:right;
display:inline;
width:270px;
}

#nav ul {
position:relative;
overflow:hidden;
font:12px arial,verdana,trebuchet ms,Helvetica;
font-weight:700;
line-height:1.4em;
margin:0;
padding:0;
}

#nav ul li {
float:left;
list-style:none;
}

#nav ul li a,#nav ul li a:visited {
display:block;
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
text-decoration:none;
margin:0;
padding:10px;
}

#nav ul li a:hover {
color:#f2f2f2;
text-shadow:1px 1px 1px #222;
background-color:transparent;
text-decoration:none
margin:0;
padding:10px;
}

4. Cari kode #main-wrapper

5. Paste kode no.3 tepat sebelum (diatas) kode #main-wrapper

Simpan ! Istirahat sejenak dahulu, jika sudah selesai istirahat kita lanjut lagi baca posting ini ...

1. Dasbor > Rancangan / Layout

2. Ke Edit HTML

3. Copy kode dibawah ini

<div id='nav'>
<ul>
<li><a href='http://caratrikblog.blogspot.com'>HOME</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Tutorial Blogging</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Widget Kode Warna</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Widget Parse Kode</a></li>
<li><a href='http://caratrikblog.blogspot.com'>Donasi</a></li>
</ul>
</div>

4. Paste kode no.3 tepat setelah (dibawah) kode <div id='header-wrapper'>

Oh ya sedikit keterangan, jangan dipaste dulu kode no.3nya, saya mau memberi penjelasan dulu. Setiap kode <div ......> pasti akan diakhiri dengan kode </div>, kode <a ......> juga akan diakhiri </a>, jadi kode no.3 itu dipaste setelah kode akhiran kode <div id='header-wrapper'>.
Contoh : ( kode yang ada dibawah ini adalah kode dari template milik saya, jadi di template sobat pasti tidak terdapat kode dibawah ini )

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Trik Blog (Header)' type='Header'/>
</b:section>
</div>

<---- Paste kode no.3 ---->

Simpan !
Ket :
- Pada tahap kedua (setelah istirahat) kode no.3 terdapat kalimat yang berwarna merah dan biru.
- kalimat yang berwarna merah adalah link yang akan dituju
- kalimat yang berwarna biru adalah kalimat yang akan tampil

Huuh .. Pusyiang kepalanya, jelasin nih tutorial, biasanya cuma posting trik yang sederhana dan simple, tapi sekarang yang lumayan ruwet. Mungkin ada tutor yang belum jelas diatas (baru pertama posting tutor yang ribet) mohon dimaklumi kawan, dan boleh bertanya ^^ .... Sekian Cara membuat menu navigasi horizontal
Selesai