Membuat Menu Horizontal Pada Blog

Menu pada blog pastinya sangat membantu pengunjung mencari kategori yang diinginkan. Selain itu menu juga dapat memperindah tampilan blog apabila letaknya diatur dengan baik menyesuaikan template. Langsung menuju materi gan untuk membuat menu horizontal secara manual.

1. Login ke akun blogger
2. Klik Tata Letak dan pilih tab Edit HTML
3. Centang Expand Template Widget, sebelumnya ada baiknya download template lengkap dulu untuk mengantisipasi bila terjadi kesalahan pada saat edit atau tidak maksimal hasilnya
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatasnya

/*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 sub 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 sub menu ketika pointer digerakkan diatasnya.

 6. Cari kode berikut :

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

 5. Kalau sudah ketemu copy paste kode berikut tepat dibawah kode tadi

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

 6. Ganti tulisan yang berwarna merah dengan URL yang anda tuju dan ganti yang berwarna biru dengan nama menu anda

7. Klik simpan template

Silakan anda menambahkan variasi sendiri untuk warna, font, lebar menu dan sebagainya. Atau jika ingin mencoba membuat menu dengan cara offline silakan anda download CSS Menu Generator.

Download CSS Menu Generator

Artikel Terkait Lainnya Seputar:

Posted in: seputar blog