Membuat Menu Navigasi dan Kotak Pencarian (Search Box)

Membuat Menu Navigasi dan Kotak Pencarian (Search Box) - Telah kita ketahui pada postingan sebelumnya, Menu navigasi adalah sebuah menu yang berisi link-link utama seperti homepage, halaman statis, kategori, tools dan kotak pencarian yang biasanya terdapat di bawah header blog. Dan menu navigasi berfungsi untuk mempermudah pengunjung atau pembaca di blog dalam melakukan pencarian suatu label atau kategori di dalam blog yang sedang dikunjungi.

Menu navigasi yang akan kita buat kali ini lengkap dengan kotak pencarian dan terletak sejajar dengan link-link menu utama. Memasang kotak pencarian sangat penting untuk diaplikasikan ke blog. Karena dengan adanya kotak pencarian di blog akan memudahkan pengunjung mencari data atau informasi yang mereka butuhkan di blog kita. Pemasangannya pun sangat mudah hanya menambah widget atau gadget di menu Tata letak dan memilih gadget kotak pencarian. Namun letak kotak pencarian tersebut terlihat kurang profesional karena terletak di sidebar, footer blog, apalagi buat para blogger yang blog mereka menggunakan template minimalis seperti blog saya, pasti akan terlihat rancu (ribet). Untuk itu saya akan share sebuah menu navigasi lengkap dengan kotak pencarian sesuai dengan pembahasan.

Menu Navigasi

Sebenarnya pembuatannya tidak jauh berbeda dengan menu navigasi yang saya buat dahulu pada postingan yang berjudul Cara Membuat Menu Navigasi Keren di Blog, hanya menambah sedikit kode (kode form search box) ke dalam kode HTML link-link menu utama. Yuk kita langsung ke langkah-langkahnya.

Cara Membuat Menu Navigasi dengan Kotak Pencarian (Search Box) di Blog

1. Pertama-tama pastikan template blog anda sudah terdapat kode di bawah ini. Kode di bawah ini berfungsi untuk menampilkan kode HTML simbol-simbol gambar (font awesome), karena di dalam menu navigasi yang akan kita buat terdapat simbol gambar kaca pembesar yang terletak pada tombol kotak pencarian. Jika belum copy paste kode di bawah ini tepat di atas kode </head>.

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

2. Cari dan temukan kode ]]></skin> (gunakan Ctrl+F untuk mempermudah pencarian).
3. Letakkan kode CSS berikut di atas kode ]]></skin>.
Kode CSS

#NavbarMenu{background:#000000; width:960px; height:32px; color:#5A6C8C; margin:auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{background:#222;color:#fff; display:block; width:200px; height:33px; font-size:11px; float:left; margin:auto; padding:0; font:bold 11px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{background:#222;color:#fff; display:block; text-transform:uppercase; text-decoration:none; margin:0; padding:9px 15px 9px; font:bold 12px Arial, Tahoma, Verdana; border-top: 1px solid #333; border-bottom: 1px solid #111; border-right: 1px solid #333; border-left: 1px solid #111;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#222; width:120px; color:#fff; text-transform:uppercase; float:none; margin:0; padding:9px 15px 9px; border-top:1px solid #333 border-bottom:1px solid #111; border-left:px solid #151f23; border-right:1px solid #151f23; font:bold 12px Arial, Tahoma, Verdana;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-35px 0 0 150px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:130px; padding:3px  7px; border:1px solid #333; font:normal 12px Arial, Tahoma, Verdana;}
#search .btn{background:#333; color:#fff; font-size:12px; margin:5px 0 0 5px; padding:3px; width:35px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}

Catatan :
(width:960px) sesuaikan dengan lebar header blog anda
(background:#fff) warna background kotak input
(width:130px) lebar kotak input
(width:35px) lebar tombol
4. Cari dan temukan kode <body> (gunakan Ctrl+F untuk mempermudah pencarian).
5. Letakkan kode berikut di bawah kode <body>.
Kode HTML

<div id='outer'>

<div id='navbarmenu'>

<div id='navbarmenuleft'>

<ul id='nav'>

<li><a href='http://harmansh.blogspot.com/' title='Home'><font color='red'>Home</font></a></li>

<li><a href='#' title='About'>About&#160;&#160;&#187;</a>

<ul>

<li><a href='https://www.blogger.com/profile/06929658245748850875' target='_blank' title='Profile'><font color='darkorange'>Profile</font></a></li>

<li><a href='#' target='_blank' title='Me'>Me</a></li>

<li><a href='#' target='_blank' title='Google Plus' target='_blank'><font color='darkred'>Google Plus</font></a></li>

<li><a href='#' target='_blank' title='Twitter'><font color='lightblue'>Twitter</font></a></li>

<li><a href='#' target='_blank' title='Facebook'><font color='blue'>Facebook</font></a></li>

</ul></li>

<li><a href='#' title='Menu'>Category&#160;&#160;&#187;</a>

<ul><li><a href='#' title='Menu'>Menu&#160;&#160;&#187;</a>

<ul><li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

</ul></li>

<li><a href='#' title='Menu'>Menu&#160;&#160;&#187;</a>

<ul><li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

</ul></li>

<li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

<li><a href='#' title='Menu'>Menu</a></li>

</ul></li>

<li><a href='http://harmansh.blogspot.com/p/site.html' title='Sitemap'><font color='blue'>Sitemap</font></a></li>

<li><a href='http://harmansh.blogspot.com/p/contact-us.html' target='_blank' title='Contact Us'>Contact</a></li>

<li><a href='#' title='Tool'>Tool</a>

<ul>

<li><a href='#' target='_blank' title='Free SMS'>Free SMS</a></li>

<li><a href='#' target='_blank' title='HTML Color Code'>HTML Color Code</a></li>

<li><a href='#' target='_blank' title='Parse Code HTML'>Parse Code HTML</a></li>

</ul></li>

</ul>

<form action='http://harmansh.blogspot.com/search' id='search' method='get'>
<input class='input' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...'/><button class='btn' title='Search' type='submit'><i class='fa fa-search'></i></button>
</form>

</div></div></div>

Catatan :
Ganti tanda pagar # dan link-link (href='link-link') dengan link blog anda
6. Terakhir klik Simpan Template atau Tema

Selain meletakkan kode HTML di atas ke bawah kode <body> di dalam template dengan edit HTML, anda juga bisa meletakkan kode HTML di atas dengan menggunakan gadget jika di bawah header blog anda sudah terdapat 1 kolom gadget. Jika belum anda bisa menyimaknya pada artikel Menambah 1 Kolom Gadget di Bawah Header.
Demikian tutorial sederhana mengenai membuat menu navigasi dan kotak pencarian (search box), semoga bermanfaat. " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG