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://chugygogog.blogspot.com/2009/02/daftar-isi.html'target="_blank">Daftar Isi</a>
<a href='http://chugygogog.blogspot.com/search/label/desain%20grafis'target="_blank">Grafic Desain</a>
<a href='http://chugygogog.blogspot.com/search/label/komputer%20internet'target="_blank">I - Komp</a>
<a href='http://chugygogog.blogspot.com/search/label/tutorial%20flash%2008'target="_blank">Tutorial Flash</a>
<a href='http://chugygogog.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.

Komentar

Oby Syam mengatakan…
oh gitu yah caranya...
hahaha lumayan... nih...
nanti ku pasang ah habis unas....

^_^

mamapri balik yah kaka
http://zona-ketawa-kita.blogspot.com/
Oby Syam mengatakan…
bro.. gagal....
gimana sih... :(
mohon pencerahanya lagi saya gak ngetii
Hans mengatakan…
sukses bro, mksh, mampir di tahantoro.blogspot.com ya,
Unknown mengatakan…
menunya bagus banget mas
apa ada yg laen???
Admin C.G mengatakan…
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:
Unknown mengatakan…
ganti ama yg ini menu ku..wah emang tutorial bikin ganti2 tampilan kok si sobat satu ini..mantap
Unknown mengatakan…
sekalian ijin ku edit2 ndiri ya sobat tutorial ini ditempatku..heheheh..maap...
Unknown mengatakan…
eh maap yg ku edit yng menu vertikalnya..maap lagi..kliru halaman komen..:)
Chugy mengatakan…
Siap ...silahkan saja di edit lagi br selalras dng templatenya...Ok sOB...
Informasi Bebas mengatakan…
ada demonya gak mas??? selain gambar di atas?
Javanese mengatakan…
Matur suwun Boss sukses.....
mampir ya ke http://thedhabrush.blogspot.com/
tp msh blajar nee harap maklum....
arif jabulani mengatakan…
Maturnuwun Pak Suhu....hasil ide ente bisa dilihat juga di blogku :
http://kendalgakure.blogspot.com/
Cara Online mengatakan…
simple n gak panjang di skrip. nice..

klo bikin jadi ada sub menu gmn yah?
Unknown mengatakan…
sip dah mampir donk di http://uccend.blogspot.com

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text