Pasang Widget Kotak Pencarian Keren di Blog

Baru-baru ini saya ingin memasang widget kotak pencarian atau penelusuran (search box). Blogger memang telah menyediakan widget kotak penelusuran ini, namun saya ingin mencari dari sumber yang lain.

Setelah mencari-cari, akhirnya saya memutuskan untuk menggunakan widget kotak pencarian yang disediakan oleh BLog Bamz. Di sana ada 6 pilihan widget dengan warna-warna yang berbeda. Jadi, kita dapat memilih widget yang warnanya senada atau serasi dengan warna template blog.

Saya sendiri memilih warna widget yang mendekati warna putih dengan tombol gambar "lup" berwarna merah yang menurut saya tidak terlalu kontras warnanya dengan blog ini. Sedangkan mengenai posisinya, saya letakkan di sebelah kanan header.

Berikut ini saya hadirkan screenshot dari widget-widget kotak pencarian keren tersebut beserta kodenya masing-masing. Cara pemasangannya adalah login ke Blogger > Opsi lainnya > Tata Letak > Tambah Gadget > HTML/JavaScript > Copy kode widget dan paste di Konten > Simpan > Klik dan seret gadget ke tempat yang Sobat inginkan > Simpan setelan.

Kotak Search 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyp_0EuWKgbAsWhkUbqp_QmExlHsFS1aguwdNH2uODc8abPTKS9lYINvFmrfhRS5FasvKVbFDWaUsEYOwOnLaSlXbg_aCA8e5X4IB6cDcjDSvu3-mQ6GgM1A9lrGQ_HEtxv2DY9L6_7Wn1/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>

Kotak Search 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTmkJ9pZubI9v8f0in9zzycnyhDRjc9VFDRbrCHmlCGDmx_kw9J_D03FvJx3a4fI3K3RRS7hiAOIWsUkCUmnuitqMtuiv3dQjUFoJCbkjmFWoRVvWHxG0cua8DK-rBk4-1Rpoqy8H6sd-/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get">    <input type="text" id="b" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="bbutton" /></form></div>

Kotak Search 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheluNjc-Z1MlN68nHq5k2NhHZPDzRfLKXg1jYDYZfQ6slZc-tPzYe0tiwVNcRU4mIg6BQWWgLjwQrQI26F92lpOavkeRhrYql6ZyUVG-s1xzwHfpDEaYAjnbW8Cq8sRdDS5TX36BAQMQqh/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get">    <input type="text" id="c" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="cbutton" /></form></div>

Kotak Search 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGI-tjfAL7oycOhlpYk7pDxh5N4DFYuqlAZvhm96Ks1_74xoP9CCfSq1Kc39RZtkWMvudAWsuWYKoHJxsQGo5ciRJL2ex_nZ6PHxcMXi3lI9t-L5eChHEFkJfPBtmLLpE5ExmopN8ufOwq/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Kotak Search 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP3C5jVYEORVfS6M5nu1fdLYh7jadw95N68ctSTfOxt7i2cJgeldj-tG_q35GnIs4CyS67Ogc5-Kvncnod9OGtj9hxC66xjCS4076yOEIPEbMgC1HEjhSNzEP06UZ43dCFic0Vuma7jzdx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get">    <input type="text" id="e" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Kotak Search 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YhifDmHOStFLsYanH-qXCXYtCo1dFy2Pcc6mUzvtzMkC5PtBgRn3z839fpLLLUY1dlddiLaFY6JZfjGP5ZprfjzjJwojSwjSl-XviYeMQ8BOLr6YhEF7sQFO344qz7AvdDmGhn-yrA36/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get">    <input type="text" id="f" name="q" value=""/>  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

Silakan pilih-pilih, dari keenam widget kotak seacrh di atas yang mana yang Sobat suka. Selamat mencoba memasangnya di blog Sobat..