halo gan disini saya memberikan sedikit tips supaya blog/website kita ada pencarian nya seperti agan lihat di blog saya di pojok kanan kita ada kotak pencarian kan, nah bagaimana cara membuat nya ?
sebenernya banyak sekali cara membuat dan kode nya tapi disini saya berbagi tentang mendesain sesuka agan pasti dong keingginan orang berbeda beda..

Fungsi kotak pencarian sih menurut saya penting untuk blog atau website kita, kenapa ? yaa coba kita berpatokan pada google, facebook, youtube dan lain lain disana pasti ada kotak pencarian nya secara gak langsung berati itu penting pada blog kita.

Biasanya sih banyak kejadian ketika membeli template premium atau agan coding sendiri kotak pencarian nya gak ada, nah ntar orang yang datang ke blog kita kebinggungan mencari cari apa yang dia cari, yaa kan. oke langsung yuk sedikit tips kita cara mendesain dan membuat kotak pencarian nya.

Pertama tama saya memberi kode ini, kode ini lumayan ringan di page speed insight yang penting agan kompres dulu gambar nya, berikut kode nya.

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://2.bp.blogspot.com/-uqt6P7T03sc/WEdDZqqgZtI/AAAAAAAACms/pOFfjVX7hx0Tq60hHH8FuR4_mWYlQtZdwCLcB/s290/Untitled-1-min.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;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>
</span>

Copy dan pastekan di layout > add gadget > pilih Html/javascript.
lalu tempel kode diatas, nah maka muncul kontak pencarian nya di pojok kanan kita.

Nah sekarang bagaimana mendesain nya ?
yang cuma  agan ganti adalah backround nya, dimana background nya ? lihat gambar dibawah ini.
Lihat kode yang saya blok nah itu url gambar nya, sekarang agan tinggal ganti sesuka agan, agan bisa membuat di photoshop atau adobe ilsulator atau dimana aja terserah agan contoh gambar yang saya buat :

Nah, bagaimana cara mendapatkan url gambar nya ? ada banyak cara sih tapi saya mendapatkan nya tapi saya memberi contoh sebagai berikut :

pertama masuk ke Pages lalu New Page setelah itu masukan gambar agan.
Setelah kita memasukan gambar nak sekarang kita ubah dalam mode html maka kurang lebih tampilan nya sebagai berikut :
-
Nah secarang kita ambil kode url nya : biasanya dimulai dari Http/Https sampai Png/Jpeg, lalu kita copykan ke kode pertama saya bagikan tadi, nah lalu lihat hasilnya.
Oh iya kalau mengubah ukuran nya agan tinggal mencari S290 atau s1600 atau lebih jelas nya lihat gambar berikut
Nah sekarang agan ubah sesuai kebutuhan agan ..
oke berikut tips desain kotak pencarian dari saya, kalau ada masih pusing tujuh keliling silahkan corat coret di komentar.