Menu navigasi untuk blog

Membuat menu navigasi untuk blog

Menu navigasi ini sebenarnya sudah banyak sekali diposting teman-teman Blogger dengan berbagai variasi effect color yang beraneka warna dan tergantung bagaimana kita melakukan setting karena ini juga mengikuti selera masing-masing ,ada yang cukup sederhana saja yang penting bisa dibaca dengan jelas dan untuk melengkapi dan mempermudah open page blog kita,ada yang dibuat variatif full effect colors and light dengan sub menunya.

  Sebelum saya share menu navigasi sebaiknya kita harus tahu dulu apasih fungsi dan manfaatnya menu navigasi itu ? dalam hal ini mungkin berbeda-beda mengartikannya tapi manfaatnya sama ,kalau menurut saya menu navigasi adalah kotak tab yang berisi text untuk menunjukkan isi page web/halaman web untuk memudahkan open page blog/web site .

  Membuat menu navigasi memang sangat dianjurkan bagi setiap blog selain menambah tampilan bagus juga akan memudahkan pengunjung membuka page blog kita,kalau kita berkunjung ke suatu blog yang tidak ada tab menu atau tidak ada penunjuk link pasti kita akan merasa sulit mau tahu apa isi blog ini misalnya home page,tutoriyal blog,info,download dll.

  Pada posting kali ini saya akan share tentang membuat menu navigasi memenuhi permintaan sobat saya Anto Maryadi yang di Karanganyar Jawa Tengah dan juga untuk semua sobat blogger kita mulai saja pembuatan menu dengan sub menu.

kita lihat dulu code script berikut ini:

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

Cara menempatkan code ini silahkan ikuti langkah berikut ini:

• Login dulu ke Blogger untuk membuka dasbor blog anda pilih blog anda dan clik option lalu pilih template ,lebih jelasnya silahkan clik

  Cara Download Template Blog

• Kemudian clik Edit HTML kalau belum pernah membuka maka silahkan pilih lanjutkan dan cari code  ]]></ b: skin>
• Letakkan code sebelum code ]]></ b: skin> atau di atasnya code ]]></ b: skin>
• Sebelum di simpan sebaiknya di pratinjau dulu untuk mengetahui error atau sukses page blog anda kalau membuka berarti sukses silahkan clik simpan template
• Untuk tahap pertama anda sukses masih ada tugas lagi dengan cara yang sama hanya clik Tata letak lalu tambah Gadged pilih HTML/Java script dan letakkan code berikut didalamnya :
  
  <div class="menu">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Tutorial</a>
  <ul>
  <li><a href="#">Windows Tricks</a></li>
  <li><a href="#">Internet</a></li>
  <li><a href="#">Software</a></li>
  <li><a href="#">Microsoft Excel</a></li>
  <li><a href="#">Microsoft Word</a></li>
  <li><a href="#">Data recovery</a></li>
  <li><a href="#">Antivirus</a></li>
  </ul>
  </li>
  <li><a href="#">Blog</a>
  <ul>
  <li><a href="#">Blog Tips</a></li>
  <li><a href="#">SEO Tips</a></li>
  <li><a href="#">Adsense</a></li>
  <li><a href="#">Feed</a></li>
  </ul>
  </li>
  <li><a href="#">Phone Tips</a>
  <ul>
  <li><a href="#">Phone Secret Codes</a></li>
  <li><a href="#">Phone Screenshot</a></li>
  </ul>
  </li>
  <li><a href="#">Link</a>
  <ul>
  <li><a href="#">Artikel Komputer</a></li>
  <li><a href="#">Panduan SEO</a></li>
  </ul>
  </li>
  
  
• Setelah code dimasukkan ke Java script/HTML sebaiknya di edit dulu :
  1. yang berwarna kuning adalah text menu yang ingin anda tampilkan 
  2. Yang berwarna merah silahkan diedit untuk variasi ukuran ,warna effect,lebar dan tinggi tab menu
  3. Kalau sudah dianggap cukup clik simpan lalu open blog lihat bagaimana hasilnya.
• Letakkan gadget dibawah header atau title blog anda
• Sudah selesai sobat silahkan dicoba semoga sukses

 Yang ada kaitannya dengan memperindah blog silahkan buka juga artikel:

Text berjalan diBlog

Cara membuat border pada blog/blogger

Membuat Favicon blog/blogger paling mudah