Cara Membuat Menu Horisontal Sederhana

Banyak cara dalam mengkreasikan pembuatan menu navigator yang akan dibahas disini adalah menu navigator horisontal sederhana yang saya terapkan di blog saya ini.

Menu navigator ini saya peroleh setelah searching di google dan anda bisa melakukanya karena banyak pilihan yang tersedia dan mungkin sesuai dengan yang anda inginkan.

Oke kita tidak usah basa - basi salah satu menu yang saya pakai di blog ini bila anda juga akan menerapkannya ada beberapa langkah :

1. Masuk ke Dashbor klik Rancangan.

2. Klik Tambah Gadget pilih Html/Javascript.

3. Copas Script dibawah ini lalu letakan di lembar Html/Javascript tadi.

Pilihan 1

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

1. Silahkan anda ganti # yang berada di herf dengan URL yang ingin anda pasang.
2. Silahkan anda ganti tulisan Link 1,2 dan seterusnya Sesuai dengan keinginan anda.
3. Bilamana anda akan menambahkan atau menghapus daftar menu silahkan anda blok kode script
<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

4.Simpan dan silahkan lihat hasilnya.

Sumber Informasi ...