Membuat Navigasi menu Horizontal di blog

Tentunya teman- teman sudah tahu apa itu menu horizontal. Menu navigasi ini biasanya tempatnya di bagian atas dan biasanya di isi link- link yang ditujukan ke halaman- halaman tertentu. Kalau menu navigasi horisontal di blog saya berisikan HOME, TENTANG SAYA, FREE SOFTWARE, dst......OK...kalau tidak faham / mudeng dengan kata- kata saya tadi langsung saja saya beritahu sedikit gambarannya di bawah ini atau langsung saja lihat di Blos saya biar lebih jelas.

Tetapi kali ini akan saya share cara- cara yang sudah saya praktekan di Blog saya ini yang selanjutnya teman- teman bisaa memodifikasinya sendiri menyesuaikan dengan warna / corak / ukuran template blog teman- teman agar lebih serasi. OK..mari kita mulai

Membuat Menu Navigasi Horizontal di Blogspot

• Login ke akun Blogger teman-teman
• Pada Dashboard Pilih Tata Letak - Edit HTML
• Jangan lupa back up dulu template teman- teman dengan mengeklik Download Template Lengkap jika nantinya terjadi kesalahan yang sudah terlanjur kita lakukan dan sudah kita simpan
• Cari kode  ]]></b:skin>
• OK...sudah ketemu? kalau sudah letakkan kode di bawah ini tepat di atas kode  ]]></b:skin> tadi
  
  

  /* navbar
  ================== */
  #bg_nav{
  background:#ffffff;
  width:900px;
  height:29px;
  font-size:11px;
  font-family:Arial,Tahoma,Verdana;
  color:#000000;
  font-weight:bold;
  margin:0px auto 0px;
  padding:0px;
  border-top:1px dotted #ececec;
  border-bottom:1px dotted #ececec;
  overflow:auto}
  #bg_nav a, #bg_nav a:visited{
  color:#000000;
  font-size:11px;
  text-decoration:none;
  text-transform:uppercase;
  padding:0px 0px 0px 3px}
  
  #bg_nav a:hover{
  color:#000000;
  text-decoration:underline;
  padding:0px 0px 0px 3px}
  
  #navleft{
  width:650px;
  float:left;
  margin:0px;
  padding:0px}
  #navright{
  width:220px;
  font-size:11px;
  float:right;
  margin:0px;
  padding:0px 0px 0px 0px}
  #navright a img{
  border:none;
  margin:0px;
  padding:3px 5px 0px 0px}
  
  #nav{
  margin:0px;
  padding:0px;
  list-style:none}
  #nav ul{
  margin:0px;
  padding:0px;
  list-style:none}
  
  #nav a, #nav a:visited{
  background:#ffffff url('http://i47.tinypic.com/16ibkvc.jpg')repeat-x top left;
  color:#000000;
  display:block;
  font-weight:bold;
  margin:0px;
  padding:8px 15px 8px 15px;
  border-left:1px solid #ffffff}
  #nav a:hover{
  background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
  color:#000000;
  margin:0px;
  padding:8px 15px 8px 15px;
  text-decoration:none}
  
  #nav li{
  float:left;
  margin:0px;
  padding:0px}
  #nav li li{
  float:left;
  margin:0px;
  padding:0px;
  width:130px}
  #nav li li a, #nav li li a:link, #nav li li a:visited{
  background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
  width:120px;
  float:none;
  margin:0px;
  font-size:80%;
  padding:5px 5px 5px 5px;
  border-bottom:0px dotted #000;
  border-left:0px dotted #000;
  border-right:0px solid #ffffff}
  #nav li li a:hover, #nav li li a:active{
  background:#ffffff url('http://i48.tinypic.com/jakvts.jpg')repeat-x top left;
  border-bottom:0px dotted #000;
  padding:7px 30px 7px 10px}
  
  #nav li ul{
  position:absolute;
  width:10em;
  left:-999em}
  
  #nav li:hover ul{
  left:auto;
  display:block}
  #nav li:hover ul, #nav li.sfhover ul{
  left:auto}
  

  1. Sesuaikan kode yang berwarna hijau dengan ukuran template kamu
  2. Sesuaikan warna- warna agar serasi dengan template blog kamu. Untuk kode warna bisa dilihat DISINI
     
  
  
  
• Jika sudah selanjutnya cari kode di bawah ini [fokuskan pencarian pada kode berwarna hijau]
  
  

  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
  <b:widget id='Header1' locked='true' title='Trik blog | Blog | Free software | free mp3 (Header)' type='Header'/>
  </b:section>
  </div>
  

• Tambahkan Kode ini Tepat di bawah kode di atas
  
  

  <div id='bg_nav'>
  
  <div id='navleft'>
  <div id='nav'>
  <ul>
  <li><a href='http://didikandweta.blogspot.com/'>home</a></li>
  <li><a href='http://didikandweta.blogspot.com/'>Tentang saya</a>
  <ul>
  <li><a href='http://didikandweta.blogspot.com/2009/12/siapakah-didik-ma-saya-itu.html'>Tentang DIDIK MA</a></li>
  </ul></li>
  <li><a href='#'>Free software</a>
  <ul>
  <li><a href='http://didikandweta.blogspot.com/'>software Hp</a></li>
  <li><a href='http://didikandweta.blogspot.com/search/label/Software'>software Komputer</a></li><li><a href='http://didikandweta.blogspot.com/search/label/portable'>Portable software</a></li>
  </ul></li>
  <li><a href='#'>Tips dan trik</a>
  <ul>
  <li><a href='http://didikandweta.blogspot.com/search/label/facebook'>Tips facebook</a></li>
  <li><a href='http://didikandweta.blogspot.com/search/label/panduan%20blog'>Trik Blog</a></li>
  </ul></li>
  <li><a href='#'>free mp3</a>
  <ul>
  <li><a href='http://didikandweta.blogspot.com/2009/11/free-download-mp3-terbaru.html'>new mp3 pop</a></li>
  <li><a href='http://didikandweta.blogspot.com/search/label/mp3%20koplo'>mp3 dangdut koplo</a></li>
  </ul></li>
  </ul>
  </div>
  </div>
  
  <div id='navright'>
  
  <form action='http://didikandweta.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
  </form>
  
  </div>
  
  </div><!-- akhir bg_nav -->
  

  Catatan:
  
  
  1. Ganti kode kode yang berwarna merah dengan link link yang ingin dituju
  2. Kode- kode yang berwarna hijau bisa teman- teman ganti sesuai keinginan teman- teman
  3. Ganti http://didikandweta.blogspot.com/ dengan alamat blog teman-teman
  
  
  
• Klik Pratinjau atau langsung Klik Simpan Template

Bila teman-teman masih bingung teman- teman bisa mengajukan pertanyaan atau unek- uneknya pada kotak komentar atau bisa bertanya langsung ke e-mail saya di didikweta@gmail.com. Selamat mencoba!!!