Membuat menu Horizontal

Assalamuallaikum wr.wb
Selamat berjumpa kembali sobat pembaca... di pagi ini saya akan coba mengulang kembali cara untuk membuat menu horizontal pada blok.
berbicara tetang menu horisontal memang gampang2 susah dikarenakan bentuk dari beberapa template seringlah berbeda2. jadi kali ini saya akan mengajari cara yang paling banyak sesuai dengan kebanyakan template, jadi misalkan dlam prakteknya tutorial ini tak mampu dalam blog sobat pembaca berarti templatnya lain, dan mungkin akan saya bahas di kesempatan yang lain untuk sementara kita coba yang ini dulu.

Ok sebelumnya walau sudah pada tau apa dan bagaimana bentuk menu horizontal itu, tetap saja saya akan memberi gambaran tentang menu horizontal,yang tujuannya memastikan apakah memang ini yang sobat maksud dari menu horizontal, nah beginilah contoh simpel tampilan menu horizontal itu :

yang di atas itu hanya bentuk simple dari  menu horizontal dan banyak sekali fariasinya, tp di postingan kali ini aku akan memberi tau dasar-dasar pembuatan menu horizontal.
1. Masuk dan log in ke blog sobat pembaca
2. Setelah masuk blog maka kita menuju Layout atau Rancangan dan pilih Edit HTML
3. Dalam kotak Css di menu Edit HTML maka kita cari code : ]]><b:skin>
4 Copy cade di bawah ini tepat di atas ]]><b:skin>

#navigation{font-size:110%;

height:2.2em;

line-height:2.2em;

margin:0 1px;

color:#999;

}

#navigation li{

float:left;

list-style-type:none;

border-right:1px solid #ccc;

white-space:nowrap;

}

#navigation li a{

display:block;

padding:0 10px;

font-size:0.8em;

font-weight:normal;

text-transform:uppercase;

text-decoration:none;

background-color:inherit;

color: #999;

}

* html #navigation a {width:1%;}

#navigation a:hover{

background:#ccc;

color:#fff;

text-decoration:none;

}

Keterangan :
Untuk yan berwarna pink sobat pembaca bisa merubah code warnanaya sesuai keinginan untuk pilihan code warna bisa click di sini

5. selanjutnya setelah tahap di atas sudah selesai cari code seperti di bawah ini atau kurang lebih yang seperti ini :

<b:section class='header' id='header' maxwidgets="1" showaddelement=”no”>

kalo tetep gak ketemu, pokoknya cari aja <b:section class='header' dan lihat di belakangnya kalow ada "1" dan ”no” pasti itulah dia, setelah ketemu ganti nilainya menjadi seperti ini :

<b:section class='header' id='header' maxwidgets="10" showaddelement=”yes”>

tujuannya adalah supaya sobat pembaca bisa menambah elemen laman maximal 10 dgets di bawah header blog sobat pembaca.

6. Setelah semua proses selesai sekarang save dan masuk ke Page element atau Elemen laman, dan di bawah page header click Add a Gadge dan masukkan HTML/Javascript lalu isikan code sebagai berikut:

<div style="text-align: center;">

  <div id="navigation">

  <ul>

      <li class="selected">

       <a href="Alamat url yang akan di tuju">Home</a></li>

       <li><a href="Alamat url untuk anak link" >Link Label</a></li>

       <li><a href="Alamat url untuk anak link">Links yang lain</a></li>

  </ul>

  </div>

</div>

Keterangan:
yang aku beri  warna kuning adalah dimna sobat pembaca menempatkan alamat url tujuan dari menu, dan di beri warna ungu adalah nama dari menu horizontal sobat pembaca. dan jangan lupa di save setelahnya.

Ok semoga informasi ini bisa bermanfaat dan membantu bagi sobat pembaca semuanya.
Salam : kholexs :)

.