Modifikasi Search Widget Blog / Kotak Pencarian Di Blog Dengan CSS

Membuat Kotak Pencarian di Blog dengan CSS bisa di bilang tidak terlalu susah, kita hanya perlu mendesain tombol search, beckground dengan gambar dan efek menggunakan css.
Di sini PangkalanUnik.Com sudah sediakan 6 kotak pencarian yang di desain dengan css, jadi sobat hanya perlu copy dan paste kode yang di butuhkan sesuai dengan pilihan yang sobat suka.


Tutorial membuatnya sebagai berikut;


1. Rancangan > Add a gadget (di mana anda akan meletakkan mesin telusur anda).



2. Pilih Tambahkan Html/Javascript, Setelah terbuka area html/javascriptnya, paste kan aja kode telusur yang sudah tersedia di bawah ini:



1. Kotak Telusur Model Pertama

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSF-oOP583Uj37_nps9aGeCC5e7C6GLerfuVB5tefG8Sh6MssXGB4VO06KEnIhHq-PPrDGcfhH2xEXSFrIv4wUss-X1jABZ8CAcjeR4pGwxHgjwSFGCwFhbYyD-Jpm9862MTvaG8rV4Pxu/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" 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="sbutton" />

</form>

</div>

Tulisan yang di Bold berwarna merah diatas adalah gambar dari background kotak pencari dengan model tampilan seperti dibawah ini.

Jika kurang berkenan, silahkan ganti dengan model seperti berikut:

background:url(http://2.bp.blogspot.com/-R2Klh9R15Go/T4kPXrmtjPI/AAAAAAAABtY/WuboxKbUS-s/s1600/kotak+pencarian+keren1.png)

 

background:url(http://4.bp.blogspot.com/-Zk5QJUtMZBQ/T4kPYjvaA1I/AAAAAAAABtc/jlO9_RNuqWw/s1600/kotak+pencarian+keren2.png)

2. Kotak Telusur Model Kedua

<style type="text/css">

#w2b-searchbox{background:url(http://2.bp.blogspot.com/-Stg7QfBri9g/T4kPZLzdqzI/AAAAAAAABto/POyK6lIxwew/s1600/kotak+pencarian+keren3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Tulisan yang di Bold berwarna merah diatas adalah gambar dari background kotak pencari dengan model tampilan seperti dibawah ini.

Jika kurang berkenan, silahkan ganti dengan model seperti berikut:

background:url(http://2.bp.blogspot.com/-R2Klh9R15Go/T4kPXrmtjPI/AAAAAAAABtY/WuboxKbUS-s/s1600/kotak+pencarian+keren1.png)

background:url(http://2.bp.blogspot.com/-R2Klh9R15Go/T4kPXrmtjPI/AAAAAAAABtY/WuboxKbUS-s/s1600/kotak+pencarian+keren1.png)

Sumber : http://membuat%20kotak%20pencarian%20di%20blog%20dengan%20css/