Search box ini biasanya diletakkan di sidebar, dimana pengujung mampu melihatnya sehingga dengan pertolongan search box mampu memasukkan keyword yang mereka ingin cari dan menemukan artikel yang inginkan.
Pada artikel kali ini saya akan memperlihatkan panduan bagaimana membuat widget kotak pencarian sendiri dengan sedikit modifikasi. Karena hampir 80% pengguna browser dikala ini menggunakan smartphone, maka widget search box yang akan saya bagikan kali ini sudah responsive artinya sudah support dengan banyak sekali perangkat mobile.
Tutorial Membuat Widget Kotak Pencarian Responsive Keren
Membuat kotak pencarian di blog bahwasanya sangat mudah, Anda pasti mampu memasang dengan mudah walaupun tidak mengenal instruksi html. Bagi Anda yang penasaran cara membuatnya, coba praktekan cara membuat Search Box/ Kotak Pencarian di sidebar blog berikut ini.Anda mampu memasangnya melalui widget default Blogger yang sudah tersedia, caranya mudah :
1. Silahkan pilih Layout
2. Kemudian klik Tambahkan Gadget
3. Pilih widget Blog Search
Kalau Anda kurang tertarik dengan widget bawaan Blogger, Anda mampu membuatnya sendiri. Untuk memasang kotak pencarian di blog, anda cukup melaksanakan dua langkah yaitu memasang instruksi css dan instruksi html
Pasang Kode CSS terlebih dahulu
1. Login Blogger kemudian pilih menu Template lalu pilih edit HTML.
2. Copy dan pastekan instruksi dibawah ini sempurna diatas ]]></b:skin>
/*Widget Search Box*/
#search-box{position:relative;margin:0 auto;border:1px solid#ccc;padding:5px;border-radius:4px}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}
3. Terakhir klik Save/Simpan
Selanjutnya Pasang Kotak Pencarian Pada Sidebar Blog
1. Masuk akun blogger anda, lalu pilih Tata Letak
2. Kemudian klik Tambahkan Gadget dan pilih HTML/Javascript.
3. Silahkan masukkan instruksi dibawah ini pada kolom HTML/Javascript
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
4. Jangan lupa klik Simpan
Cara Paling Mudah Membuat Kotak Pencarian Keren
Cara yang kedua ini merupakan cara paling mudah yang mampu Anda lakukan tanpa edit HTML. bila Anda tertarik silahkan ikuti tutorial berikut ini:1. Login akun Blogger anda.
2. Pilih menu >Tata Letak > Add Gagdet > HTML/Javascript
3. Copy dan Paste instruksi berikut ini kedalam kolom HTML/Javascript
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;}
#search-box input[type="text"]
{width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;
width: 80px;font-size: 14px;color: #fff;text-align: center;
line-height: 42px;border-width: 0;background-color: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
4. Selesai, jangan lupa klik Save/Simpan
Catatan:
- background-color: #1a7db7; ialah warna tombol search. bila anda ingin merubah warnanya silahkan ganti dengan instruksi warna pilihan anda.
- Cari Artikel Disini… : Kata-kata dalam kolom pencarian, mampu diganti dengan kata-kata Anda sendiri
Selamat Mencoba. Sumber http://www.panduaneka.com/