Trik Membuat Widget Kotak Pencarian Keren untuk Blog

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

Trik Membuat Widget Kotak Pencarian Keren untuk Blog
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

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

<style type="text/css">
#exe-searchbox{background:url(http://2.bp.blogspot.com/-8Khpb3lvlkw/TqBZnRPaR5I/AAAAAAAAAj8/OBUsJJlhATo/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>
Untuk pilihan warna lainnya, ganti url yang diwarnai merah di atas sesuai dengan gambar yang ada di bawah ini.
Warna hitam

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

http://2.bp.blogspot.com/-YK8N1e-QfCc/TqBZoFG7nYI/AAAAAAAAAkE/PHRUhGRfaZU/s1600/Black-Search-Engine.png

Warna biru

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

http://1.bp.blogspot.com/-rWeiYWCmHIk/TqBZooXrghI/AAAAAAAAAkM/Fvm-gfaIuf8/s1600/Blue-Search-Engine.png

Warna hijau

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

http://3.bp.blogspot.com/-vxXsk24PYUc/TqBZpWE4scI/AAAAAAAAAkU/_0dLPsFRHYQ/s1600/Green-Search-Engine.png

Warna merah

Trik Membuat Widget Kotak Pencarian Keren untuk Blog

http://2.bp.blogspot.com/-r9ZPNWJubic/TqBZp-73XNI/AAAAAAAAAkc/_qnbg8EXakU/s1600/Red-Search-Engine.png

Demikian Trik Membuat Widget Kotak Pencarian Keren untuk Blog ini, semoga ada manfaatnya dan selamat mencoba.

Artikel terkait:

Bagikan: