Cara Membuat Menu Bar Tanpa Edit HTML

      Banyak cara yang dilakukan para blogger untuk memudahkan pengunjung agar dapat  menyelami isi atau postingan yang telah kita publikasikan, salah satunya adalah  dengan menyediakan 'Menu bar'. Fungsi dari menu bar sendiri adalah
mengarahkan pengunjung  menuju link yang sedang mereka cari dan biasanya menu bar di tempatkan di bawah header blog. Menu bar terdiri dari beberapa tab dan di dalam masing-masing tab tersebut berisi link postingan yang telah dibuat berdasarkan label atau yang ditujukan ke website lain.
Dalam postingan kali ini saya akan berbagi cara membuat menu bar yang  berada dibawah header blog tepatnya. Ada beberapa cara dalam pembuatan menu bar pada blog salah satunya adalah dengan edit HTML namun bagi pamula mungkin terkesan agak susah karena dalam pengeditan HTML harus benar-benar fokus dan  teliti, ada pula  cara yang kedua adalah sebaliknya yaitu tanpa perlu edit html walaupun sederhana apa salahnya kita coba dulu mungkin kita cocok dengan tampilanya yang simple dan menarik.

 Tanpa panjang lebar langsung aja ya sob yang pertama jangan lupa log ini ke akun bloger dulu

• Masuk ke dashboard =>  Tata letak 
• Tambahkan gadget (tempatkan di bawah header)=>  Tambahkan HTML/Java srcipt
•  Biarkan judul kosong
•  Silahkan copy dan paste kode di bawah ini
• <style>
  
  #tab_menu {
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkWBWeCn8-V_0JUOX3ohcEsnFW6Xc_yGMPQzVcJaZfCJWPYPAkPgqiETFQzPQrKa5bQ50LfJ70oRaHw3xjWUsYMDLAxWn9CL2sj50QE4GZ_mh-nPTS58WS17-G4F3VblCc7cNZPI6mDjB/s1600/menu_bg.png) no-repeat;
      height:50px;
      width:960px;
      line-height:50px;
      list-style:none;
      margin-top:10px;
      font-size:14px;
      font-family:Verdana, Geneva, sans-serif;
      font-weight:bold;
      overflow:hidden;
  }
  
  #tab_menu li {
      float:left;
      border-right:1px solid #FFA722;
      border-left:1px solid #CC5200;
  }
  
  #tab_menu li:first-child {
      border-left:none;
  }
  
  #tab_menu li:last-child {
      border-right:none;
  }
  
  #tab_menu li a{
      text-decoration:none;
      float:left;
      display:block;
      height:50px;
      padding:0 20px;
      color:#FFF;
  }
  
  #tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
      color:#622900;
      text-shadow:1px 1px 0px #E8964B;
  }
  
  #tab_menu li a.tool{
      color:#000;
      text-shadow:1px 1px 0px #E8964B;
  }
  
  </style>
  <ul id='tab_menu'>
  <li ><a href='#'>Home</a></li>
  <li ><a href='#'>PRODUCT</a></li>
  <li ><a href='#'>FAQS</a></li>
  <li ><a href='#'>CONTACT US</a></li>
  <li ><a href='#'>ABOUT US</a></li>
  </ul>

•  Kode ''#'' bisa sobat ganti dengan URL halaman tujuan sobat
• Sobat bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda, sementara Anda berada di halaman tersebut.
• Untuk menampilkan semua posting di bawah label (kategori),sobat perlu link ke halaman label.
• Untuk mengubah lebar lebar menu edit: 960px. 
• Silahkan save dan lihat hasilnya.

Itulah cara bagaimana cara membuat Menu bar tanpa edit html yang simple dan sederhana.