0 Membuat Menu Horizontal Yang Simple Dan Cantik

Ada beberapa macam menu link horizontal yang biasa di pakai untuk sebuah blog ataupun website, dari yang menggunakan warna dasar sampai dengan menggunakan image, tapi toh fungsinya tetap sama yaitu menuju link yang diinginkan. Untuk membuat sebuah menu atau link yang horizontal tidaklah sulit. Disini saya coba untuk membuat menu link horizontal yang sederhana tatapi akan terlihat cantik.

Silahkan ikuti langkah - langkahnya berikut ini :

Masuk pada Tata Letak dan Edit HTML
Masukan kode di bawah ini diatas kode ]]></b:skin>
*********************************************************

/* horizontal solid menu di mulai
------------------------------------------- */

/*Credits: CSS Library for new blogger (beta) */

.menu-solid{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: #000 ;
}
.menu-solid {
display: inline;
}
.menu-solid a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.menu-solid a:visited{
color: #cc0000;
}

.menu-solid a:hover, .menu-solid .current{
color: #000;
background: #f3f3f3;
text-decoration:none;
}

Setelah itu Klik Simpan.

Masih pada Tata Letak Masuk pada Eleman Halaman dan tambah Widget dibawah Header, Pilih Java Script.
Lalu Masukan Kode Di bawah ini
*********************************************************

<!-- silahkan anda ganti alamat linknya dengan kepunyaan anda -->
<div class='menu-solid'>
<a href='http://chugygogog.blogspot.com'target="_blank">Home</a>
<a href='http://ilmu-desain-grafis.blogspot.com/2009/02/daftar-isi.html'target="_blank">Daftar Isi</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/desain%20grafis'target="_blank">Grafic Desain</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/komputer%20internet'target="_blank">I - Komp</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/tutorial%20flash%2008'target="_blank">Tutorial Flash</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/tutorial%20blog'target="_blank">Blogging</a>

</div> <!-- akhir menu solid -->

Terakhir Klik simpan.
Jangan Lupa ganti alamat Link-nya. Cukup mudah bukan Selamat mencoba.

Tweet

Komentar →