Tips Mudah Membuat Menu Horizontal Di Blogspot

Menu horizontal adalah kumpulan dari link-link yang tertata rapi secara mendatar dan biasanya terletak di bagian atas web/blog.

Contoh:

Menu Horizontal Blog studio

Tidak semua template tersedia menu tersebut dan bila sobat ingin mebuatnya seperti di blog studio ini, silahkan ikuti tips berikut ini:

• 1. Login ke akun Blogspot Sobat
• 2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
• 3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, sobat bisa mengembalikannya dengan menguploadnya kembali.
• 4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
• 5. Cari kode seperti dibawah ini pada template sobat:

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

• 6. Jika sudah ketemu, silahkan opy kode di bawah, tepat dibawah kode-kode pada langkah 5.
  

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

• 7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
• 8. Sobat akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.

• 9. Buka kembali bagian Edit HTML pada blogspot sobat, kemudian cari kode ]]></b:skin>.
  

• 10. Silahkan copy kode di bawah ini dan letakkan 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;
}


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.

• 11. Kemudian ubah kode yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:

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

• 12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.

• 13. Klik tombol SIMPAN TEMPLATE dan lihat hasilnya :)

Selamat mencoba n hepi BLOGGING

Baca juga yang terkait