Membuat sub menu horizontal dengan submenu

Assalamu'alaikum sobat. ingin memiliki menu horizontal dan sub menu seperti blog saya dan teman saya seperti gambar di atas? bagi sobat-sobat sekalian trik ini sangat bermanfaat untuk meningkatkan SEO blog sobat! membuat menu horizontal adalah menu diatas yang mengarah ke samping, sedangkan sub menu adalah menu kebawah dari menu horizontal. untuk membuatnya tidak sulit kok hanya tinggal copas saja!

langsung saja ikuti lagkah-langkah berikut ini :

1. Login Ke BLOGGER (pastinya...)

2. pilih Template -> Edit HTML

3. kemudian lanjutkan/proceed dan jangan lupa centang checkbox "Expand Template Widget"

4. copas kode di bawah ini tepat diatas/sebelum 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. sudah selesai, kemudian simpan template/save template

6. kemudian pilih layout/tata letak

7. pilih add gadget/ tambah gadget 

8. dan pilih HTML/Javascript

9. copas kode berikut di HTML/Javascript :

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

<li><a href='#'>Home</a> </li>

<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>

<li><a href='#'>Title</a>
<ul>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>
</ul> </li>
<li><a href='#'>Title</a> </li>
</ul>
</div>

  


Note : - ubah tanda # dengan URL alamat tujuan (jangan hapus tanda ')

          - ganti Title dan Home dengan judul/nama menu horizontal yang sobat inginkan

          - bila ingin menu horizontal saja tanpa sub menu bisa gunakan kode dibawah ini :

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

<li><a href='#'>Home</a> </li>
<li><a href='#'>Title</a> </li>
<li><a href='#'>Title</a> </li>

<li><a href='#'>Title</a> </li>

<li><a href='#'>Title</a> </li>

 
</div>

10. Bila selesai simpan/save

11. tunggu proses menyimpan dan selamat menu horizontal selesai dibuat

12. lihat blog sobat, bagaimana????

terima kasih semoga bermanfaat bagi sobat-sobat sekalian 

Wassalamu'alaikum!!

Sumber : klik disini