Cara Membuat Menu Horizontal Pada Blogger

Ok....Saat saya akan menshare cara untuk membuat "menu horizontal". Di hampir semua blog atau website menggunakan "menu horizontal" yang berguna untuk memudahkan para visitor untuk menuju apa yang visitor cari....ya.....untuk menghemat waktu para visitor sekalian....maka langsung aja ke TKP....

Steps:
* Pertama-pertama sign in seperti biasa
* Klik tata letak untuk bahasa indonesia atau layout untuk bahasa inggris
* Klik edit html
* Trus klik expand widget template

* Sebelum membuat menu horizontal jangan lupa download template agar misalnya ada kesalahan, bisa menggunakan template sebelumnya :D *

- kalau sudah, cari kode berikut

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

- kemudian ganti angka 1 dengan 2 dan no dengan yes
terus dibawahnya ada kode

b:widget id='Header1' locked='true'

- Ganti true dengan false Terus save template

- Setelah itu untuk menambah menu horizontal tinggal copy-paste kode dibawah pada page element - header - klik add page element - pilih html - kemudian paste kode dibawah terus save.

<div id="nav">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">FAQ</a></li>

<li><a href="#">Product</a></li>

</ul>

</div>

- Jangan lupa mengganti kode # dengan link yang mengarah ke nama yang berwarna "hitam".

- Setelah itu, pindah ke "edit HTML" dan centang "Expand Widget Templates"

- Kemudian copy-paste kode dibawah ini diatas ]]></b:skin>

#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;

}

#nav li:hover{

background:#00FFFF;

}

*Untuk warna menu horizontal ini bisa diganti sendiri jika ingin menggunakan warna yang lain.*

lalu save template :D

Selamat mencoba !!!

Posted in: Blog