Sebuah blog sedianya harus
memiliki Widget Kotak Pencarian atau Search Box. Karena Kotak Pencarian ini
sangat dibutuhkan pengunjung untuk mendapatkan apa yang mereka cari di dalam
sebuah blog. Rasanya tidak mungkin pengunjung akan mencari sesuatu dengan cara
manual, walaupun sudah disediakan Widget Label atau Kategori misalnya. Apalagi
untuk blog yang artikelnya sudah mencapai ratusan bahkan ribuan.
Karena fungsinya yang vital itulah, maka sebagai blogger pemula semestinya juga memasang Widget Kotak Pencarian ini untuk memudahkan pengunjung agar mereka merasa dilayani dengan baik oleh pemilik blog. Berikut ada beberapa pilihan Widget Kotak Pencarian, pilih salah satu untuk menyempurnakan tampilan blog yang kita miliki. Untuk memasangnya ikuti langkahnya berikut ini.
Trik Membuat Widget Kotak Pencarian Keren untuk Blog
- Pertama login ke blogger
- Kemudian pilih menu Tata Letak
- Pilih Tambahkan Gadget
- Setelah itu masukkan kode CSS di bawah ini sesuai dengan gambar yang ada
- Langkah terakhir simpan dan lihat hasilnya.
Warna kuning
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL28MvpNY5CjdcK54KpgRnGyMMGGd-pVoeAT2IzyfRhXk_OVcxgVr9dyXAyi0Qtzi_OKvi9pDJDo9wZPgPlIdOq0zhS0r0RiydoBNTBSlLZfa21YlEnHqXNWXYogD1tUUXe3zJFarNPA/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Warna hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBIn6M0QMeQLSrWI0zD19ZelPLhgf8qtX61Xb3C3dVghKJnywv4T0Rfqe16EEBdXj5a1O_e6Im7ookUhzTmjKfNWZahl-uWkRHXj7VcYS6Y7NKP8ldbkomZ8oobd77H4WlzvLQWdM1Q/s1600/Black-Search-Engine.png
Warna biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Cgn4b6xvXHXCgdtImZ5uuKrq2jfg1mNYVOJNyKhUZMbdAm3p7Eicn_jplcFLihocnOYKyNiT7So_PFYhMPEXOozRU_CCMjy_yPSgNVKanRgrU6NMhVGJJjCoZDvhGmskkralj9KQ-g/s1600/Blue-Search-Engine.png
Warna hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Iv7_EMbxT7QR1lStXgoz2nViQYm2RARjs2jplzxsaDGE5iyBWsVFILOeqUdtZNz9AKUDTqL1SrUplLwuKvlHioiy7-ZN075c0u9mQTiFMYDR7HTAExbqlF2C0_K4ipi20v716FmJjg/s1600/Green-Search-Engine.png
Warna merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYawgjLPEg1bov6AFdFxSx7iwFeBQsHn-iddMD8Al4WfLaY4fxOm_a5FHisMch3MSQNDT2ce4vKR05XwbMt2Xkw2h0wBqA18PTtjM7jXeqAoCiEnafZAqN3uzq7JBbVJ48HPQqUmHGQ/s1600/Red-Search-Engine.png
Demikian Trik Membuat Widget Kotak Pencarian Keren untuk Blog ini, semoga ada manfaatnya dan selamat mencoba.