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 :

Langkah pertama :

Masuk pada Tata Letak dan Edit HTML
Masukan kode di bawah ini diatas kode ]]>
*********************************************************

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

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

5 thoughts on “Membuat Menu Horizontal Yang Simple Dan Cantik

  1. Untuk Syam obi coba ulangi dan ikuti langkahnya seperti di atas, Mungkin anda kurang teliti memasang kode HTML-y ataupun ada kode yang ketinggalan.

    Dan untuk Fawwaz, Sebenarnya semua menu harizontal maupun vertical pada prinsipnya sama saja tinggal bagaimana kita mengolahnya mau menggunakan background warna ataupun image tergantung pada kreatifitas anda saja….!
    Cobalah bereksplorasi dengan yang sudah ada. Trima Kasih:

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s