Menu Horizontal dengan menggunakan Widget

Kali ini kita aka mencoba untuk membuat menu Horizontal dengan menggunakan widget.
Kelebihannnya kalau kita mengunakan widget adalah kita dapat memindah letak menu tersebut dengan cepat sesuai dengan keinginan kita.
Adapun untuk membuat menu horizontal pada blogger menggunakan widget langkah-langkahnya adalah sebagai berikut:

* pertama2 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

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

Untuk menu horizontal dalam template atau menggunakan html dan css kopi kode dibawah ini paste diatas Code: ]]></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.

Setelah itu untuk menambah menu horizontal tinggal kopi kode berikut pada widget dan tempatkan sesuai keinginan kita:

<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 # dan nama yang berwarna merah.
Terus buka elemen halaman atau page element pada header klik add page element html terus paste kode itu terus save.

Lihat hasilnya....

Tweet