Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1

• Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2

• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3

• Setelah itu 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; }
• Setelah itu Simpan Templates.
• Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
• Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript(Gb.5)

Gb.4

Gb.5

• Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.
  
  <div class='menuhorisontal'>
  <ul id='nav'>
  
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
  <ul>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'></ul> </li>
  
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  
  <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
  <ul>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  </ul> </li>
  <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
  </ul>
  </div>
• Lalu simpan,selesai dan lihat hasilnya :D

** Untuk http://tulis_alamat_url_tujuan gantilah sesuai tujuan kamu kemana link akan diarahkan,misal;
http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html dan tulisan Ganti Sesuai Keinginan gantilah denga keterangannya,misal dengan keteranganMembuat Navigasi Css dengan Sub Menu,maka dalam penulisannya;
<li><a href='http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html'>Membuat Navigasi Css dengan Sub Menu</a> </li>




Sumber :http://pelajaran-blog.blogspot.com