Cara Mudah Membuat Menu Horizontal Di Blog

Postingan saya kali ini akan membahas tentang bagaimana membuat menu horizontal di blog. menu horizontal sangatlah penting dalam sebuah blog, jadi wajib kiranya menu blog ini ada di blog kita, karena sangat berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu. Biasanya pada template standart blog ada yang belum terpasang menu horizontal, Buat Blogger yang pada template-nya belum tersedia menu horizontal, sobat bisa menambahkan dengan cara berikut ini (ini cara simple-nya)

Screenshot

Langkah-langkahnya:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah Kode Dibawah ini:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

• Jika sudah ketemu, silahkan copy paste kode berikut tepat dibawah kode-kode pada langkah diatas

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

• Lalu Simpan Template.
• Lanjut lagi sob... kalo dilihat pasti menunya bukan horisontal tapi vertikal, hehee.. Nah untuk itu kita perlu menambahkan kode css, agar menu menjadi horisontal dan lebih menarik tentunya.
• Masih pada bagian Edit HTML, dan carilah kode: ]]></b:skin>
• Lalu copy paste kode dibawah ini tepat diatas kode: ]]></b:skin>

/*CSS untuk menu horizontal*/

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

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

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

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

Keterangan:
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

• Setelah itu sobat jg perlu merubah pada kode berikut (ini kode pada langkah diatas):

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

Sobat Ubah Menjadi:

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>

Keterangan:
Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. begitu jg seterusnya.

• Simpan template dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat.