Cara Membuat Kotak Pencarian di Navbar Blog

Tutorial ini akan menjelaskan mengenai Cara membuat kotak pencarian di Navbar Blog horizontal, seperti apa yang dilihat pada gambar diatas. Google Custom Search memungkinkan anda semua untuk mencari kata atau artikel di blog ataupun website pilihan anda dengan cepat.

Berikut langkah-langkahnya :

1. Login dulu ke blogger.
2. Setelah itu klik Template dan pilih Edit HTML.
   jangan lupa backup terlebih dahulu tamplate asli anda untuk mencegah hal-hal tak diinginkan.
3. Selanjutnya cari kode ]]></b:skin>.
4. Copy kode dibawah ini, dan paste diatas kode ]]></b:skin>
   /* search ===================== */ #search{width:210px;font-size:11px;float:right;margin:0;padding:0} #searchform{overflow:hidden;display:inline;margin:0;padding:0} #searchbox{background:#ddd;margin:0;padding:0} #search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px} #search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
5. Langkah berikutnya cari kode yang mirip seperti ini <div id='Navbar'> atau seperti ini <div id='navigation'>. intinya cari kode Navbar pada template blog masing-masing.
6. Kalau sudah ketemu copy kode dibawah ini, dan paste diatas </div> dibawah </ul>.
   <div id='search'> <form action='/search' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXW3u_cTXfwEvFR0H2L_eVOs7WUAbV7kO2buvw2HGp9i4VC2-_aqIVKR_nx0T36waJjYmPIB_VRTDtvhRo0dPW4Y3-FprsCwsKUJu9mKp2Ahse1HDZOkqeOQf1xl9vokFvhAZuUxwg-8oz/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/> </form> </div>
7. Apabila penyisipan kode diatas sulit, anda bisa lihat contoh penyisipan kode dibawah ini :
   <div class='bilah-menu-atas' id='bilahmenuatas'> <div class='kolom-utama'> <div class='kolom-menu'> <ul> <li><a href='/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pnDyjV7RCrZcC9oUhDr_XTVtBd2z4k27212yJVpLbtPmk6DwDP6axcpg1etlGn1dbqr5sMnGfAAeiqAUXVg4tH7BiyJHh6-J0av-SWqHyxI9nuPn7BxakESltl9hAUVnmGSb7gG31lE/s800/Beranda.png' width='20px'/></a></li> <li><a href='URL'>Menu Kiri 1</a></li> <li><a href='URL'>Menu Kiri 2</a></li> </ul> </div> <div class='kolom-menu'> <ul style='float: right'> <li><a href='URL'>Menu Kanan 1</a></li> <li><a href='URL'>Menu Kanan 2</a></li> </ul> < /div> </div> </div>
8. Perhatikan susunan kode yang diBlod di atas, tempatkan kode pencarian kustom setelah kode </ul> yang terletak paling dekat dengan kode </div>, mengapa yang paling dekat?  Karena bisa jadi terdapat lebih dari satu kode </ul> dalam rangkaian kode html navbar blog sebagaimana yang saya contohkan di atas. Jadinya seperti ini :
   <div class='bilah-menu-atas' id='bilahmenuatas'> <div class='kolom-utama'> <div class='kolom-menu'> <ul> <li><a href='/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pnDyjV7RCrZcC9oUhDr_XTVtBd2z4k27212yJVpLbtPmk6DwDP6axcpg1etlGn1dbqr5sMnGfAAeiqAUXVg4tH7BiyJHh6-J0av-SWqHyxI9nuPn7BxakESltl9hAUVnmGSb7gG31lE/s800/Beranda.png' width='20px'/></a></li> <li><a href='URL'>Menu Kiri 1</a></li> <li><a href='URL'>Menu Kiri 2</a></li> </ul> </div> <div class='kolom-menu'> <ul style='float: right'> <li><a href='URL'>Menu Kanan 1</a></li> <li><a href='URL'>Menu Kanan 2</a></li> </ul> <div id='search'> <form action='/search' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXW3u_cTXfwEvFR0H2L_eVOs7WUAbV7kO2buvw2HGp9i4VC2-_aqIVKR_nx0T36waJjYmPIB_VRTDtvhRo0dPW4Y3-FprsCwsKUJu9mKp2Ahse1HDZOkqeOQf1xl9vokFvhAZuUxwg-8oz/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/> </form> </div> </div> </div> </div>
   
   Kode yang berwarna merah adalah kode yang dicopy dan dipaste diantara kode </ul> dan </div>.
   
   Demikian tutorial Cara membuat kotak pencarian di Navbar Blog, selamat mencobanya.