Membuat Menu Horizontal di Blog

Menu horizontal adalah menu navigasi yang disusun memanjang ke samping. Menu ini sebagai gambaran kecil dari isi blog kita. Dengan memasang Menu Horizotal akan memudahkan pengunjung membuka/melihat sebagian dari halaman blog, juga menambah menarik tampilan blog kita.
Berikut ini langkah-langkah membuat menu horizontal yang diletakkan dibawah header
- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Centang "Expand Widget Template"
- Supaya aman, silakan Download dulu template (klik Download Template Lengkap)
- Gunakan tombol F3, cari kode: ]]></b:skin>
- Silahkan copy struktur berikut dan letakkan di atas kode: ]]></b:skin>

/*CSS menu horizontal*/

.menhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menhor ul li{
list-style: none;
display: inline;
}

.menhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #D7DF01;
border: 2px solid #D7DF01;
}

.menhor ul li a:hover{
background-color: #F2F5A9;
border-style: outset;
}

- Kemudian cari Css seperti di bawah ini:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

- Jika sudah ketemu copy Css di bawah ini, letakkan tepat di bawah Kode tadi.

<div class="menu horizontal">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Nama halaman yang akan dituju URL 2</a></li>
<li><a href='URL 3'> Nama halaman yang akan dituju URL 3</a></li>
<li><a href='URL 4'> Nama halaman yang akan dituju URL 4</a></li>
</ul>
</div>


- Silahkan ganti URL 1,2,3,4….. dengan URL halaman yang akan dituju ….
contoh:
<li><a href='http://archive69blog.blogspot.com/2010/06/warna-kode-warna.html'>Warna</a></li>

( URL 1 lebih banyak dipakai untuk Home/Beranda blog)

- Terakhir klik tombol SIMPAN TEMPLATE.