Elegant Horizontal Menu Include Search Box Untuk Blog

Hampir tidak ada rasanya sebuah Blog atau Website tanpa menggunakan Menu Navigasi, banyak sekali macam-macam menu navigasi yang tersedia di internet dengan berbagai variasinya, seperti vertikal menu, horizontal menu, drop down menu, popup menu, atau mungkin bisa beberapa jenis menu navigasi digunakan pada sebuah blog, tentu saja hal ini disesuaikan dengan kebutuhan dari banyaknya informasi pada blog tsb.

Pada dasarnya fungsi dari Menu Navigasi diatas secara umum hampir sama, sebagai navigator atau pemandu bagi pengunjung blog sehingga pengunjung bisa bebas memilih mau membaca artikel yang mana. Biasanya pemilik blog menempatkan link yang dianggap penting agar mudah ditemukan dan dibaca oleh pengunjung. Atau bisa juga link label sehingga apabila pengunjung mengkliknya langsung terbuka sederetan artikel yang tergabung dalam label tersebut. Link yang biasa dipasang pada menu horisontal, yang paling umum misalnya : Profil, Contact, Sitemap, Buku Tamu dan lain-lain tergantung selera pemilik blog.

Horizontal Menu, Menu Horizontal, Tab Menu Horizontal, Horizontal Navbar, Navigasi Horisontal adalah merupakan istilah yang sama. Kalau didefinisan menurut pemahaman kami adalah serentetan menu yang tersusun secara mendatar, menyamping, dimana menu tersebut berupa link yang apabila di-klik akan tertuju kepada sebuah halaman web.

Horizontal Menu yang ingin kami sharing kali ini disertai dengan kotak pencarian atau lebih dikenal dengan nama search box, padahal sama saja hanya beda penggunaan bahasa. Kami memberikan embel-embel "elegant" bukan semata-mata membuat nice judul posting, namun dengan tampilan yang simple/sederhana, rapi tetapi enak dipandang dari situlah rasanya tidak terlalu berlebihan jika kami memberikan tambahan kata "elegant" untuk Horizontal Menu ini.

Jika rekan-rekan pembaca tertarik untuk menambahkan Horizontal Menu ini pada blog rekan-rekan atau mengganti menu navigasi sebelumnya, berikut kami paparkan cara pengaplikasiannya pada flatform blogger, silahkan disimak :

• Seperti biasa silahkan login ke akun Blogger rekan-rekan.
• Silahkan lakukan backup Template rekan-rekan sekalian, untuk jaga-jaga bila nanti ada kesalahan penempatan kode, atau tidak cocok dengan blog rekan-rekan.
• Tuju bagian Edit HTML.
• Cari kode ]]></b:skin> pada template rekan-rekan, kemudian letakan kode CSS dibawah ini tepat sebelum kode ]]></b:skin>.

/* Elegant Top Menu With beautiful Search Box Start */
#top-menu{background:none repeat scroll 0 0 #DDDDDD;margin-bottom:15px;padding:0;width:100%}
#topbar{margin-left:5px;width:100%}
.clearit{clear:both;font-size:0;height:0;line-height:0;margin:0;padding:0}
#top{width:100%}
#top,#top ul{list-style:none;margin:0;padding:0}
#top a{background:none repeat scroll 0 0 transparent;border-top:3px solid transparent;color:#333333;display:block;font:700 11px Arial;margin-right:20px;padding:6px 0 7px;text-decoration:none;text-transform:none;transition:all 0.3s ease-in-out 0s}
#top a.trigger:before{border-color:#333333 transparent transparent;border-style:solid;border-width:8px 5px 0;content:"";display:block;float:right;height:0;margin:5px 0 0 5px;transition:all 0.3s ease-in-out 0s;width:0}
#top a.trigger:hover:before{border-color:#B0130D transparent transparent;border-style:solid;border-width:8px 5px 0;content:"";display:block;float:right;height:0;margin:5px 0 0 5px;width:0}
#top li{list-style:none;float:left;position:static;width:auto}
#top li ul,#top ul li{list-style:none;background:none repeat scroll 0 0 #DDDDDD;box-shadow:1px 1px 3px #999999;padding-left:5px;width:150px}
#top ul li a{border:medium none;color:#333333;font:bold 13px Arial;padding:5px 0;text-align:left;text-transform:none}
#top li ul{background:none repeat scroll 0 0 transparent;display:none;margin:0;padding:0;position:absolute;z-index:100}
#top a:hover{border-top:3px solid #A73F3C;color:#B0130D}
#top li:hover ul,#top li.hvr ul{display:block}
#top ul li a:hover{border-bottom:medium none;color:#B0130D;padding-left:10px}
#top a.trigger:hover{border-bottom:3px solid #DDDDDD}
.searchfield {color: #555555;font: 11px Tahoma,Verdana,Arial,Sans-Serif;padding: 2px 5px;width: 150px;}
.logosearch {background: none repeat scroll 0 0 transparent;float: right;height: 28px;padding: 3px 6px 0 0;width: 50px;}
.searchbutton {border: medium none;cursor: pointer;height: 21px;margin: 0;padding-top: 1px;vertical-align: top;width: 50px;}
/* Elegant Top Menu With beautiful Search Box End */

• Kemudian cari kode <body>, letakan kode HTML berikut ini tepat dibawahnya.

<div id='top-menu' style='border-top:3px solid #A73F3C;-o-box-shadow:0px 0px 7px 0 #c7c7c7;-ms-box-shadow:0px 0px 7px 0 #c7c7c7;-moz-box-shadow:0px 0px 7px 0 #c7c7c7;-webkit-box-shadow:0px 0px 7px 0 #c7c7c7;box-shadow:0px 0px 7px 0 #c7c7c7;'>
  <div class='content-wrapper'>
  <div id='topbar'>
   <ul id='top'>
    <li><a href='/'>Home</a></li>
    <li><a href='LINK 1'>Daftar Isi</a></li>
    <li><a href='LINK 2'>Privacy</a></li>
    <li><a href='LINK 3'>Hubungi Kami</a></li>
   </ul>
  <div class='searchbox' style='float:right;padding:0 6px;margin-bottom:-3px;margin-right:-3px;overflow:hidden'>
  <div style='float:right;padding:4px 2px 1px 0;'>
   <form action='/search' id='cse-search-box' method='get' target='_blank'>
    <div>
     <input class='searchfield' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' style='width:180px;padding:2px 0 2px 3px;' type='text' value='  Search here...'/>
     <input alt='search' class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlk_5mZbHGFNXQiIK1VFgcxIpTiSvj2XsTBp8ENUaUOODtYP4SMnwc0TTBS1FUIa1IqdQ1_7HPHgblcwguMsmNqCGA82Wbkw_-4JpYKUstL1p0-sbHdYax1M3HGc1zndrIJPHmJMF3jcg/s1600/button-search.png' title='Search!' type='image'/>
    </div>
   </form>
  </div>
  <div class='logosearch'>
   <img alt='Google' height='28' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3iKWLbBy_yLI_Pm__GcVdxmJkPzSsd2zsynqdfE2K219v4t4YpOtqjPsHia4oq-xlDMdPoWGLYU0MNOZooBodl9XjuQBLnBf_2KFWZ9ikzrZzrG4x36K7Ir08dyAazDt_xwsPrqJ8QDs/s1600/google-search.png' title='Google Search' width='50'/>
  </div>
  </div>
  <div style='clear:both;'/>
  </div>
 </div>
  </div>

• Simpan Template.

Bagaimana langkahnya mudahkan ?, Horizontal Menu sudah terpasang pada blog rekan-rekan, masih ada pengaturan yang perlu dilakukan agar tampilannya lebih serasi untuk blog rekan-rekan, silahkan ikuti petunjuk berikut :

• Cari kode "#A73F3C", ini adalah kode warna untuk merah maroon, untuk border atas dan hover saat link pada Horizontal Menu di tunjuk, silahkan ganti dengan kode warna yang sesuai dengan blog rekan-rekan.
• Ganti tulisan "LINK 1" dengan link yang rekan-rekan kehendaki, misalkan http://www.fenuto.com/p/daftar_isi.html untuk link Daftar Isi, lakukan hal yang sama untuk "LINK 2" dan "LINK 3" atau tambahkan list lain jika diperlukan.

Itu saja yang paling berpengaruh untuk Horizontal Menu ini, selebihnya jika rekan-rekan cukup menguasai bahasa CSS silahkan modifikasi sesuai keinginan, semoga artikel ini bermanfaat untuk kami team penulis disaat mulai lupa dan untuk rekan-rekan para pembaca dalam membangun blog / web.