Menu pada blog merupakan salah satu bagian yang penting untuk memudahkan pengunjung menjelajahi isi blog. berikut ini akan saya berikan tutorial untuk memasang menu horisontal dengan efek hover dan juga dilengkapi dengan kotak pencari di blog.

langsung saja caranya sebagai berikut ini:

• Masuk ke dashboard blog;
• pilih template kemudian edit template;
• Centang Expand Template Widget;
• Cari kode ]]></b:skin>  , gunakan ctrl + f untuk mempercepat pencarian;
• Kemudian copy kode beriku ini tepat diatas kode ]]></b:skin> tadi;

  /*Menu Navigasi atas*/
  #topnav2 {margin:auto;padding: 0;width: 100%;background: #ededed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKavA7ZlS-29DNy3kmDIqKHxk5dsQT8XTv5IiLgTSPTIrfpSJ_H5YmLTVZajuMCqv67et2bg2wNM_xoOfYmK4FWCYO5mJaNLlgLhoFAZmYJng9blfeYX_w5RDfeHuXOJFkqQrUq_FwsWpO/s1600/bg.jpg) repeat-x;z-index:999; -webkit-box-shadow:0px 3px 4px 0px #383737; -moz-box-shadow:0px 3px 4px 0px #383737; -o-box-shadow:0px 3px 4px 0px #383737; -ms-box-shadow:0px 3px 4px 0px #383737; box-shadow:0px 3px 4px 0px #383737; position: relative;}
  #topnav-wrap2 {margin: 0 auto;padding: 0;width: 100%}
  .topnav2 {width:1000px; margin:auto;}
  .topnav2 ul{display: table;
    width: 797px;margin:0;padding:0;float:left;}
  .topnav2 li { display: table-cell;
    width: 20%;
    height: 31px;
    line-height: 31px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;}
  .topnav2 ul:hover li {
    width: 15%;
  }
  .topnav2 li:hover {width: 40% !important;
    opacity: 0.7;}
  .topnav2 li a {font-family: 'Segoe UI';font-size: 14px;display: block;padding:0;color: #333333;text-decoration: none;}
  .topnav2 ul li:nth-of-type(1) { background: #FF4C4C; }
  .topnav2 ul li:nth-of-type(2) { background: #FFBF49; }
  .topnav2 ul li:nth-of-type(3) { background: #444444; }
  .topnav2 ul li:nth-of-type(4) { background: #6FDC6F; }
  .topnav2 ul li:nth-of-type(5) { background: #3AADFE; }
  
  /* Search*/
  #searchbg{width:202px; float:right; margin:2px 0 0 0}
  #search{width:200px; font-size:11px;  margin:0px; padding:0; height:25px; border:1px solid #ccc; background:#ededed; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px}
  #search input{background: transparent; color:#333; float:left; font-size:12px;text-align:center; margin:3px 0 0 10px; width:150px; padding:3px 5px;  font-size:11px; font-family:arial; border:0}
  #search .btn{margin:5px 5px 0; padding:0; width:auto; border:0}

• setelah itu cari kode berikut ini dengan menggunakan ctrl + f:
  <div id='top-wrapper'>
  atau
  <div id='main-wrapper'>atau
  <div id='header-wrapper'>
• copy kode berikut dan letakkan diatas ataupun dibawah kode diatas.
  

  <!-- Navigasi start -->
  <div id='topnav2'>
  <div id='topnav-wrap2'>
  <div class='topnav2'>
  <ul>
  <li><a href='http://yusrandante.blogspot.com/2012/11/mari-saling-review-alexa.html' title='review my alexa'>Review alexa</a></li>
  <li><a href='http://yusrandante.blogspot.com/2012/06/link-and-banner-exchange.html' title='bertukar link'>Exchange Link</a></li>
  <li><a href='http://yusrandante.blogspot.com/2012/08/sahabat-blogger-dengan-komentar.html' style='color:#fff' title='komentar terbanyak'>Top Comment</a></li>
  <li><a alt='mobile' href='http://yusrandante.blogspot.com/?m=1' rel='nofollow' title='versi mobile'>Versi Mobile</a></li>
  <li><a alt='mobile' href='http://yusrandante.blogspot.com/view/classic' rel='nofollow' title='dinamic view'>Dinamic view</a></li>
  </ul>
  <!-- Start search -->
  <div id='searchbg'>
  <div id='search'>
  <form action='http://yusrandante.blogspot.com/search' id='searchform' method='get' style='display:inline;'>
  <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel...&quot;;}' onfocus='if (this.value == &quot;Cari artikel...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel...'/>
  <input alt='go' class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgteeA2gKpU9ok-WOjzMFQKKasXc6MgIH_2jdFYkVsjAdx-XDVVePvqGYjnMjVUv1jIDNvmoP_ptSpWZwGc0VVXQTr3_sQaJ87IdLVUqVxPdsKMGykhD8kokTGg6WZsdxNHdhTgwCyix_5p/s1600/search.png' type='image' value='go'/>
  </form>
  </div>
  </div>
  <!-- end search -->
  </div>
  </div>
  <div style='clear: both;'/>
  </div>
  <!-- Navigasi end -->
  Note: ganti url yang berwarna merah dengan url yang akan anda gunakan sebagai menu horisontaal.. 
  ganti juga url berwarna biru diatas dengan url blog anda.

• Gunakan metode trial and error saja untuk mendapatkan hasil yang sesuai. sehingga penempatan kodenya seperti di bawah ini;
  
  letakkan kode di sini
  <div id='top-wrapper'>
  atau letakkan kode di sini
  
  atau
  
  letakkan kode di sini
  <div id='main-wrapper'>
  atau letakkan kode di sini
  
  atau
  
  letakkan kode di sini
  <div id='header-wrapper'>atau letakkan kode di sini
  
  Note :Jika anda tidak menemukan kode yang serupa dengan diatas, maka coba-coba saja cari kode lain yang mirip. Untuk pemasangan kode di atas, agar tidak terjadi kesalahan backup template blog terlebih dahulu. Serta jangan langsung save jika anda menggunakan metode trial and error, gunakan saja pratinjau terlebih dahulu untuk melihat hasilnya. 

demonya seperti di bawah ini:

• menu1
• menu2
• menu3
• menu4
• menu5