Cara Memasukan Kotak Search ke dalam Menu Navigasi

Untuk mencari artikel yang terdapat dalam suatu blog terkadang kita harus mencari satu persatu dari postingan artikel, untuk memudahkannya maka di perlukan suatu menu / widget search yang terpasang di blogger, ada yang bawaan dari blogger yaitu kita tinggal memasangnya saja dari widget yang di sediakan dan menu search ada juga cara yang digunakan dengan cara memasang code html, Javascript dan CSS program ke template.

Disini saya akan berbagi dari apa yang telah saya coba, yaitu memasukan menu search kedalam menu navigasi seperti pada blog saya :

Cara yang harus di lakukan adalah :

1. Buka dashboard blogger pilih > Tema > Edit Html
2. Setelah masuk di edit HTML cari  ( Ctrl + F ) <!-- secondary navigation menu end --> atau kalau tidak ada cari <!-- /header-wrapper --> Bisa copikan code berikut di bawahnya :

<form action='/search' id='search-form' method='get' style='display: inline;'>
<table><tbody><tr><td class='search-box'>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Cari Artikel...' vinput=''/></td> <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>

3. Setelah itu Copykan code CSS di atas kode  */]]></b:skin> di edit html  code berikut :

/*-----Custom Search----*/
 #search-form
{ background:#333333;
float:right; margin:0 0;
 width:280px; }
 #search-form table {
width:100%;
margin:0 0 0 0; }
 #search-form td.search-box {
 padding-right:30px; }
 #search-form input#search-box[type="text"]
{ background:#ffffff;
 height:24px;
line-height:22px;
margin:2px 0 2px 10px;
padding:0 10px; width:99%;
color:#333333; border:none; }
 #search-form input#search-button[type="submit"]
{ font-family: FontAwesome;
 background:#333; color:#ffffff;
height:24px; line-height:22px;
 margin:2px 10px 2px 0; padding:0 10px;
border:none; outline:none; transition:all 0.25s;
-moz-transition:all 0.25s;
-webkit-transition:all 0.25s; }
#search-form input#search-button[type="submit"]:hover
{ background:#666;
cursor:pointer; }
#search-form input#search-box[type="text"]:focus
{ background:#eee;
 outline:none; }
 /*-----End Custom Search----*/

Kemudian terakhir simpan tema dan lihat hasilnya....
Apabila letak tidak sesuai dengan tempatnya anda tinggal edit saja ukurannya di code CSSnya.

Selamat Mencoba, jika tidak berhasil silahkan comment di bawah.

Tweet