Membuat Menu Horizontal Pada Blog

Artikel sebelumnya yang telah saya jelaskan tentang membuat menu bisa kalian lihat DISINI. Sekarang saya akan menjelaskan cara membuat menu horizontal pada blog. Menu ini sebenarnya lebih dikenal dengan sebuat Horizontal Hover Menu.

Untuk membuat menu horizontal ini, silahkan kalian lihat tahapnya dibawah ini :

1. Login Ke blogger Kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan kode Berikut diAtas kode ]]></b:skin>

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

Keterangan :
== font: bold 13px arial; ---> Jenis Huruf dan Ketebalan Huruf
== color: black; ---> Warna Huruf Awal
== background-color: #FFF2BF; ---> Background Menu
== border: 2px solid #FFF2BF; ---> Warna dan Ketebalan Border menu
== background-color: #FFE271; ---> Background menu saat kursor menyorot
== border-style: outset; ---> Jenis border saat kursor mouse menyorot

Untuk kode HTML warna bisa kalian lihat DISINI dan untuk melihat jenis2 border bisa kalian lihat DISINI.

5. Sekarang kalian cari kode berikut (Tidak selalu terpaku disini, tergantung keinginan kalian)

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

6. Simpan kode berikut tepat dibawah kode pada tahap No. 5

<div class="hovermenu">
<ul>
<li><a href="LINK KALIAN">HOME</a></li>
<li><a href="LINK KALIAN">TEST 1</a></li>
<li><a href="LINK KALIAN">TEST 2</a></li>
<li><a href="LINK KALIAN">TEST 3</a></li>
<li><a href="LINK KALIAN">TEST 4</a></li>
</ul>
</div>

7. SIMPAN template kalian

Semoga bisa bermanfaat dan silahkan kreasikan sendiri tampilan menu diatas.