Memasang Widget Pencarian Cantik Di Blogger

Halo para sahabat Oto Website, hari ini blog ini akan membahas tentang Memasang Widget Pencarian Cantik Di Blogger.
kotak pencarian sangatlah penting sob bagi pengunjung blog kita, biasanya kotak pencarian ini di gunakan untuk mencari articles/postingan kita di blog kita, apabila tidak ada tombol search/pencarian maka pengunjung akan sedikit sulit mencari apa yang mereka cari.

Jika blog kita semakin cantik maka akan semakin enak di pandang, iya kan?

Maka dari itu blog oto website ingin memberikan atau berbagi beberapa style kotak search cantik untuk blog sobat yang mungkin sobat suka!
silahkan sobat pilih sendiri mana yang sobat suka, selanjutnya silahkan pasang di blog sobat masing-masing, oke.

Cara Pemasangan:
1.Masuk ke blogger sobat masing-masing.
2.Lalu Klick Rancangan Pilih tab tambah gadget.
3.Pilih HTML/Java Script.
4.Lalu Masukkan/pilih/copy-paste salah satu kode script di bawah ini.

STYLE 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZeuo0hVaJxawwFEsMJqHhv9rSdssb-a1qgiUA5_pRDK-QqBfKFVv0t-sA5iI0xqjgooGqHrCcKfM2qT5npefPdwwL6eHlmtLAvXIKmVVZtQFVlNnnuOwVXEpNkXpmj2hOYB4J0i8bvJ75/) 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>

STYLE 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggYNWRFic_eG6yqxrqqBt2AITwL1_d87iHdb7Z5KjfuVRrjudRBbOjETu3Nuf6Cxc9Ho_ZP6h4MfLYLyX_FQTJRl2dXLxmNihGt3mBcD_S189gUnUKy929ZupZZueAvsBmAD4Lxi6SJZNj/) 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>

STYLE 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitRL2SBLScnyGVRkb_YohhiuO3A_CStPCGqfpSrVBOTGsP41tGqxRY_GaadmVjPhzUQfaO-p-NUJ9O2YEChdlYNRJeEF2RTEieDwvJNg1sUv8Plm62s7wTn6lMmL6LewhfveiA5RG-cj-J/) 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>

STYLE 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie21ZXRsGTFUlD2jVoLH3d-bYBlWDPK4XetIKinwGmBJGeUWNS2y0MLuxikIJygOxZJQfKhY7vcRa5I_OxbB0gygNF4hqg-sQ_l7VPIqJmVm2SHYsX3DLLvQZeYAdJJp77S5flchUtK1nH/) 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>

STYLE 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYx3TB8DzBStzE2T-K5SJj-Ixvy2b1wOlmo08d1HFCsEOV8br1tvHG3Vs3TI9n0OR7axaxrEDhnJZYR7sG_74Q1n_OgVHgj91Bs2IciEl4A7aETEfOp_zD-U1pPa2UxJgXpOEnnMBp5IVS/) 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>

STYLE 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhvNOgXAaNVctmGSgzZ25mXoOk0K05nHcL88GYAYg-Q3AzSgnHw3yZEUNPS0PN0jWBgpsMm4GfakqIz9DMYNkE_6nLGsWUcW3koQJlUrDoKhtIMIpYnlcek5D7Lz3SzjaVlwtHjHjVQcvl/) 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>

5.Selanjutnya klick Simpan, dan lihat hasilnya.

Apakah berhasil?
Silahkan tinggalkan komentar dan tanggapan sobat tentang wiget ini.