Cara Membuat Menu Horizontal di Blog

      Terus terang postingan ini saya buat karena ada permintaan dari teman blogger yang bertanya melalui buku tamu saya.  
      Sebenarnya Menu Horizontal yang terdapat pada sebuah web/blog selain berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu, juga bisa menambah estetika. Harus diakui bahwa pada template blogspot standart, fasilitas menu horizontal tidak ada didalamnya.  jadi anda harus sedikit mengutak atiknya agar dapat memperolehnya. Berbeda dengan beberapa template gratis dari pihak lain, template tersebut ada yang telah menyediakan menu horizontal jadi tidak usah repot lagi..
      Untuk membuatnya anda bisa menggunakan tutorial berikut:

1. Login ke akun Blogspot pembaca
2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
   
4. JANGAN beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari kode seperti dibawah ini pada template pembaca:
   b:section class='header' id='header' maxwidgets='1' showaddelement='no' jika tidak ada bisa di coba dengan klik ctrl+f dan masukkan kata b:section class='header
6. kemudian ganti angka 1 dengan 2 dan no dengan yes 
7. terus dibawahnya ada kode: b:widget id='Header1' locked='true'  
8. Ganti true dengan false Terus save template 
9. Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut

<div id="nav">
<ul>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
<li><a href="URL">nama</a></li>
</ul>
</div>

   10.  Jangan lupa mengganti kode URL dan nama yang berwarna merah.
   11.  Paste dibawah kode

<b:widget id='Header1' locked='false' .....dst.........'/>
</b:section>
</div>

 Langkah Selanjutnya Copy Kode Dibawah Ini:

#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
    float:left;
    list-style-type:none;
    padding:3px 5px 3px 5px;
    margin:1px;
    border:#CCCCCC 1px solid;
}
#nav li a{
    text-decoration:none;
    color: #FFF;
    display: block;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0;
    padding: 7px 10px;
}
#nav li a:hover{
    background:#00FFFF;
    color:#FFF;
    margin: 0;
    padding: 7px 10px;
    text-decoration: none;
}

Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain, silahkan menuju ke postingan saya tentang kode warna dan contohnya. 
Khusus kode color:#FFF; ini adalah kode buat warna hurufnya, jadi silahkan diganti dengan kode warna lainnya dengan mengubah huruf yang saya warnai biru.

Setelah itu paste diatas ]]></b:skin> lalu save template.

Lihat hasilnya. 
Semoga berhasil dan sukses. 

Jika ingin menu horizontal model lain seperti milik saya, silahkan klik disini

Silahkan komentar dibawah bila anda gagal/berhasil,  juga bila ada yang ingin anda ditanyakan.