Membuat Menu Navigasi Horizontal di Sertai Sub Menu Vertikal - Pada kesempatan kali ini saya akan share sedikit tentang cara membuat menu vavigasi horizontal di sertai sub menu vertikal. Menu navigasi horizontal ini memang terbilang sangat di butuhkan kehadirannya dalam blog kita karena memiliki fungsi yang cukup penting dalam hal untuk menunjukkan apa saja yang ada atau di miliki oleh blog kita.
Untuk preview atau tampilan hasil jadinya bisa langsung anda lihat pada gambar di atas. Oke, langsung saja simak dengan baik tutorial cara membuat menu vavigasi horizontal di sertai sub menu vertikal di bawah ini!
1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".
3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
4. Kemudian cari kode
]]></b:skin> dan letakkan script kode berikut ini tepat di atasnya.
#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 save/simpan template.
6. Kemudian kita tentukan di mana letak menu navigasi horizontal tersebut akan di tampilkan dengan cara :
- Masuk ke halaman "Tata Letak".
- Klik "Tambah Gadget".
- Kemudian pilih "HTML/JavaScript".
- Lalu masukkan script kode berikut ini di dalamnya!
<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
<li><a href='#'>Menu 2.3</a></li>
<li><a href='#'>Menu 2.4</a></li>
</ul></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Menu 5.1</a></li>
<li><a href='#'>Menu 5.2</a></li>
<li><a href='#'>Menu 5.3</a></li>
<li><a href='#'>Menu 5.4</a></li>
<li><a href='#'>Menu 5.5</a></li>
<li><a href='#'>Menu 5.6</a></li>
<li><a href='#'>Menu 5.7</a></li>
<li><a href='#'>Menu 5.8</a></li>
<li><a href='#'>Menu 5.9</a></li>
</ul></li>
<li><a href='#'>Menu 6</a>
<ul>
<li><a href='#'>Menu 6.1</a></li>
<li><a href='#'>Menu 6.2</a></li>
<li><a href='#'>Menu 6.3</a></li>
<li><a href='#'>Menu 6.4</a></li>
<li><a href='#'>Menu 6.5</a></li>
<li><a href='#'>Menu 6.6</a></li>
</ul></li>
<li><a href='#'>Menu 7</a></li><li><a href='http://ngeposta.blogspot.com'>Ngeposta</a></li>
</ul>
</div>- Dan yang terakhir klik save/simpan, selesai dan lihat hasilnya...
Note :
Ganti tanda # dengan alamat url (link) yang akan menjadi tujuan setelah menu itu di klik. Dan ganti atau sesuaikan tulisan Menu 1-7 dengan teks/tulisan yang anda inginkan.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon