Advertise

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.

14 komentar:

  1. oh gitu yah caranya...
    hahaha lumayan... nih...
    nanti ku pasang ah habis unas....

    ^_^

    mamapri balik yah kaka
    http://zona-ketawa-kita.blogspot.com/

    BalasHapus
  2. bro.. gagal....
    gimana sih... :(
    mohon pencerahanya lagi saya gak ngetii

    BalasHapus
  3. sukses bro, mksh, mampir di tahantoro.blogspot.com ya,

    BalasHapus
  4. menunya bagus banget mas
    apa ada yg laen???

    BalasHapus
  5. 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:

    BalasHapus
  6. ganti ama yg ini menu ku..wah emang tutorial bikin ganti2 tampilan kok si sobat satu ini..mantap

    BalasHapus
  7. sekalian ijin ku edit2 ndiri ya sobat tutorial ini ditempatku..heheheh..maap...

    BalasHapus
  8. eh maap yg ku edit yng menu vertikalnya..maap lagi..kliru halaman komen..:)

    BalasHapus
  9. Siap ...silahkan saja di edit lagi br selalras dng templatenya...Ok sOB...

    BalasHapus
  10. ada demonya gak mas??? selain gambar di atas?

    BalasHapus
  11. Matur suwun Boss sukses.....
    mampir ya ke http://thedhabrush.blogspot.com/
    tp msh blajar nee harap maklum....

    BalasHapus
  12. Maturnuwun Pak Suhu....hasil ide ente bisa dilihat juga di blogku :
    http://kendalgakure.blogspot.com/

    BalasHapus
  13. simple n gak panjang di skrip. nice..

    klo bikin jadi ada sub menu gmn yah?

    BalasHapus
  14. sip dah mampir donk di http://uccend.blogspot.com

    BalasHapus