Membuat Menu Navigasi dengan Sub Menu

Sebuah situs akan kelihatan lebih profesional, apabila terdapat Menu Navigasi. Selain mempercantik tampilan dari situs yang kita miliki, menu sangat bermanfaat saat kita membuat link. Dengan menu penggunaan link tidak memakan banyak tempat. Menu bisa berupa pull down maupun drop down.
Berikut pembuatan menu navigasi horizontal dengan sub menu vertikal yang saya peroleh dari hasil surfing ke berbagai blog tutorial untuk blogspot.
Bagi yang penasaran bagaimana cara membuat menu navigasi dengan sub menu, bisa ikuti langkah berikkut ini.
1. Masuk ke blogspot dengan ID yang anda miliki
2. Klik dasbor kemudian klik Rancangan dan Klik Edit HTML
3. Setelah itu, contreng tulisan/checkbox 'Expand Widget Templates'
4. carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.

#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. Klik Simpan Template
6. Klik Tab Rancangan / Tata Letak,selanjutnya klik tulisan 'Add New Widget / Tambah Gadget',dan pilihlah Html / Javascript
7. Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://tulis_alamat_url_tujuan'>Beranda</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Perangkat</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Silabus</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>RPP</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Modul</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Soal</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Tugas</a></li></ul> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Tutorial</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Blog</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>SEO</a></li>
</ul></li>

<li><a href='http://tulis_alamat_url_tujuan'>Artikel</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Teknologi</a>
</li>
<li><a href='http://tulis_alamat_url_tujuan'>Informatika</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Earning</a></li></ul> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Wirausaha</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Bisnis Online</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Adsense</a> </li>
</ul> </li>
</ul>
</div>

8. Klik Simpan
9. Lihat Hasilnya

Sekian artikel berjudul Membuat Menu Navigasi dengan Sub Menu, Semoga bermanfaat. URL artikel: http://javablogtrik.blogspot.com/2012/04/blog-menu.html

Artikel Terkait: