Rabu, 30 November 2011

Cara Membuat Menu Horizontal

hujan-hujan gini bingung mau ngapain, mendingan saya lanjut nulis artikel buat blog saya..
artikel yang saya akan tulis adalah tentang Cara Membuat Menu Horizontal di blog.
Untuk pembuatan menu sebenarnya banyak sekali tutorialnya, tapi saya akan mencoba share sedikit tentang Cara Membuat Menu Horizontal yang sudah saya tahu. sebagai contoh pada blog saya

pada script ini menurut saya lebih mudah daripada yang lain.
okeh langsung saja kita ke langkah pembuatannya, langkahnya sebagai berikut :
1. Login ke blogger - pilih Rancangan - Edit HTML

2. Klik " Download Full Template " untuk backup template

3. Centang " Expand Widget Templates " dan cari kode ]]></b:skin> ( gunakan Ctrl+F)

4. Copy kode CSS berikut dan paste diatas kode ]]></b:skin>

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

5. Lalu " Simpan Template ", kemudian pilih Tab " Tata Letak " dan buat " Element Baru / Add New Widget " pilih " HTML / Javascript ".

6. kemudian temen-temen masuk ke rancangan > edit laman dan tambah gadget HTML / Javascript
7. Copy kode berikut dan pastekan di gadget HTML / Javascript yang baru temen-temen tambahkan tadi

<ul id='nav'>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>

8. selesai dech...

***
  •  Untuk menambahkan daftar menu copy kode <li><a href="#">Menu tambahan </a></li>
    tepat dibawahnya
  • Untuk "#" anda isi dengan alamat URL yang akan di tuju, sedangkan Menu 1,2,3,4 merupakan menu yang akan ditampilkan. Teman-teman bisa rubah tulisan menu sesuai dengan link yang akan dituju, misal Home , Tukar Link  dll.

Artikel Terkait:

1 komentar: