Salam Blogger
Berikut adalah cara memasang kotak pencarian di menu navbar pada blog kita :
* Silahkan Login pada akun Blog anda
* Pada sidebar sisi kiri pilih Theme/Tema
* Pilih Edit HTML
* Cari Kode : ]]></b:skin>
* Gunakan CTRL+F untuk pencarian lebih cepat
* Copy dan pastekan kode berikut tepat 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:#fcfcfc;color:#4a464670;float:left;font-size:12px;width:394px;border:1px solid #de360f;font:normal 12px arial, verdana, Times New Roman;margin:-46px 0px 0px -480px;padding:15px 20px}
#search .btn{width:auto;border:0;margin:-35px -69px 0;padding:0}
Keterangan :
Tulisan berwarna merah anda bisa rubah sesuai dengan pengaturan nantinya agar sesuai dengan menu navbar.
Kemudian :
* Carai lagi kode </ul> dan </div>
* Copy dan pastekan kode berikut tepat diantara kode </ul> dan </div> :
<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='Cari Produk Disini'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNQIwKfveM-REZwx9zT9yALxITKfhPSMkDehm_jF3TksH22amPkBC7p7nMzaFtJLmd8thyphenhyphenvhDqGdJLCMnYM4hSuyR1cLd1TbIyYYPs912zfX7EMO3azPyhCVWRqQrecZBBEcp7Y9iKWHm/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
Atau contohnya seperti pada gambar dibawah ini :
Sedangkan gambar kedua diatas yang terdapat tanda panah merah merupakan standard,
Pada kesempatan kali ini Caranecom ingin berbagi tutorial atau cara membuat search box pada menu navbar atau seperti pada contoh gambar dibawah ini :
Search box atau kotak pencarian diatas dikhususkan untuk blogspot, meskipun sebenarnya blogspot sendiri biasanya sudah membekali setiap template dasar dengan kotak pencarian namun tidak ada salahnya jika kita membuat sesuatu yang lebih menarik, khususnya kotak pencarian diatas cocok digunakan untuk blog atau online store dimana kotak pencarian sangat penting keberadaannya diamana kotak tersebut sangat berguna dan mempermudah pengunjung pada saat ingin mencari suatu postingan, kategori dan suatu produk yang diinginkan oleh pengunjung pada website kita yang mereka kunjungi.
Berikut adalah cara memasang kotak pencarian di menu navbar pada blog kita :
* Silahkan Login pada akun Blog anda
* Pada sidebar sisi kiri pilih Theme/Tema
* Pilih Edit HTML
* Cari Kode : ]]></b:skin>
* Gunakan CTRL+F untuk pencarian lebih cepat
* Copy dan pastekan kode berikut tepat 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:#fcfcfc;color:#4a464670;float:left;font-size:12px;width:394px;border:1px solid #de360f;font:normal 12px arial, verdana, Times New Roman;margin:-46px 0px 0px -480px;padding:15px 20px}
#search .btn{width:auto;border:0;margin:-35px -69px 0;padding:0}
Keterangan :
Tulisan berwarna merah anda bisa rubah sesuai dengan pengaturan nantinya agar sesuai dengan menu navbar.
Kemudian :
* Carai lagi kode </ul> dan </div>
* Copy dan pastekan kode berikut tepat diantara kode </ul> dan </div> :
<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='Cari Produk Disini'/>
<input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNQIwKfveM-REZwx9zT9yALxITKfhPSMkDehm_jF3TksH22amPkBC7p7nMzaFtJLmd8thyphenhyphenvhDqGdJLCMnYM4hSuyR1cLd1TbIyYYPs912zfX7EMO3azPyhCVWRqQrecZBBEcp7Y9iKWHm/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
</form>
Atau contohnya seperti pada gambar dibawah ini :
Pada contoh gambar diatas terdapat banyak </li> dan </ul> karena banyak terdapat label kategori dropdown.
* Simpan tema
* Selesai dan lihat hasilnya
Jika hasilnya tidak sesuai dengan yang diharapkan silahkan anda lakukan edit dengan mengubah tulisan berwarna merah pada kode diatas atau dengan cara lihat blog kemudian klik kanan dan pilih inspect elemen, anda bisa melakukan perubahan sementara pada inspect element jika telah sesuai baru ubah pada html aslinya.
Demikian cara memasang kotak pencarian pada menu navbar pada blogspot ini semoga bermanfaat.
Salam Caranecom