Tab Menu Horizontal dengan Sub Menu

Dulu saya pernah share cara Tab View Menu Horizontal. Kali ini saya akan share kembali cara memasang Tab Menu Horizontal dengan Sub Menu yang lebih simple.Disini kita akan memasang Tab Menu tersebut dibawah header atau dibawah title blog.

• Status anda sudah dalam keadaan login di blogger
• Pilih Desain
• Pilih edit HTML 
• Cari code ]]></b:skin>
• Letakkan code berikut diatas code ]]></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:#00ffff; height: 15px; color: #330000; 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 #ff0000; } #nav li a:hover, #nav li a:active {background: #ccff33; color: #000066; 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: #660000; width: 150px; color: #ffff00; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #cccc00; } #nav li li a:hover, #nav li li a:active { background: #ff6600; color: #00cc00; 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; }

Pilih simpan Template
Selanjutnya klik Tata Letak
Pilih Tambah Gadget 
Lihat Gambar bawah :

Pilih Javascript/HTML
Copy paste code dibawah ini:

<div class='menuhorisontal'>
<ul id='nav'>
<li><a href='http://tulis_alamat_url_tujuan'>Home</a> </li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='http://www.quackit.com/'>Quackit</a> </li>
<li><a href='http://tablegen.nfshost.com/'>Table Generator</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Tutorial 3</a> </li>
<li><a href='http://internetdangameonline.blogspot.com/'>Tutorial 4</a> </li>
</ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>CSS/HTML</a> <ul>
<li><a href='http://tulis_alamat_url_tujuan'>CSS/HTML 1</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>CSS/HTML 2</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>CSS/HTML 3</a> </li>
<li><a href='http://www.mybloggertricks.com/2009/11/14-amazing-ways-to-customize-blockquote.html'>Block Quote</a> </li>
</ul></li>
<li><a href='http://tulis_alamat_url_tujuan'>Daftar Isi</a> </li>
<li><a href='#'>Template</a> <ul>
<li><a href='http://www.hooverwebdesign.com/templates/table-generator.html'>Webdesign</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 2</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 3</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 4</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 5</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 6</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 7</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 8</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 9</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 10</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Template 11</a> </li>
</ul> </li>
<li><a href='#'>Link Exchange</a> <ul>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 1</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 2</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 3</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 4</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 5</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 6</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 7</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 8</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 9</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 10</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Link Exchange 11</a> </li>
</ul> </li>
</ul>
</div>

Klik Simpan
Simple bukan.

Ditulis Oleh : Unknown~Tutrorial Blogspot

Sobat sedang membaca artikel tentang Tab Menu Horizontal dengan Sub Menu. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini. Silakan di rubah dan sesuaikan dengan selera sobat <a href="http://publicnetberau.blogspot.com/2012/01/tab-menu-horizontal-dengan-sub-menu.html" target="_blank">Tab Menu Horizontal dengan Sub Menu</a>

:: Thank's To ::