CARA BUAT MENU HORIZONTAL SEDERHANA

     Menu horizontal yang biasa ada pada blog atau pun situs berfungsi sebagai menu navigasi bagi pengunjung blog untuk mempermudah mencari artikel dalam blog dan juga berfungsi untuk menambah keindahan dan juga kerapian dari blog. Menu horizontal yang berikut ini akan di bahas mempunyai beberapa sub menu yaitu home, daftar isi, kontak dan juga tentang yang penambahan dari sub menu dapat anda lakukan selanjutnya dengan edit beberapa bagian dari kode htmlnya. Berikut langkah dan kode menu htmlnya :

1. Dari halaman buat pos baru pilih Tata Letak.
2. Pilih Tambahkan Gedget pada kotak di bawah header.
3. Pilih Html / Javascript.

4. Lalu copy dan paste kode html di bawah ini ke halaman html yang di buka.

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#00FF00;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='http://carirecehan123.blogspot.com/2013/05/'>Home</a></li>
<li><a href='http://carirecehan123.blogspot.com/2013/06/daftar-isi-carirecehanblogspotcom.html'> DAFTAR ISI</a></li>
<li><a href='#'> kontak</a></li>
<li><a href='#'>tentang</a></li>
<li><form action="http://carirecehan123.blogspot.com/search" id="searchthis" method="get" style="display: inline;">
<input id="b-query" maxlength="255" name="q" size="20" type="text" /> <input id="b-searchbtn" type="submit" value="Search" /></form></li>
</ul>

Cara Edit kode htmlnya:

1. Url Home yang berwarna merah ganti dengan Url home blog anda.
2. Url Daftar isi ganti yang berwarna kuning dengan Url daftar isi anda.
3. Untuk Kontak dan tentang masih mengunakan default dari blog (pada blog carirecehan123 saat ini belum di buat) anda dapat menganti urlnya dengan menambahkan url pada tanda # berwarna biru         

     Kode html di atas dapat di tambah atau pun di kurangi sub menunya dengan cara copy paste html ini :

<li><a href='http://carirecehan123.blogspot.com/2013/05/'>Home</a></li>

Kode di atas carirecehan123 dapat dari blog "blog-rangga" pada blogspot, sekian dulu---

SELAMAT MENCOBA SUKSES SELALU