Modifikasi Search Widget Blog / Kotak Pencarian Di Blog Dengan CSS

Posted by Iqbal IDesainer

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(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) 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/

Posting Komentar

Cari Artikel di Label Blog Ini

Anime (8) Anti Virus (30) Ayo Dance (12) Browser (25) Food (7) Games (56) Hacker (14) Knowledge (484) Media Player (18) Misteri (78) Ninja Saga (41) Other (126) Pendidikan (129) Point Blank (334) Serba 7 (58) Sofware (157) Tips (179) Tips Blog (44) Tips Komputer (27)