Tentang Cara Membuat Kotak Search Keren Diblog

Hai sob.. Maaf jarang post.. soalnya saya banyak kegiatan di tambah ujian jadi harus memanfaatkan waktu sebaik mungkin deh.. hehehehe
Kali ini Saya mau membahas Tentang Cara Membuat Kotak Search Keren Diblog sobat..
Sebagian orang ingin tentunya memiliki blog yang menarik.. Maka dari itu mereka berusaha membuat blog semenarik mungkin.. Ini salah satu cara membuat blog mu menarik sob.. heheh
LANGSUNG AJA YA..

1. Pastinya Sign in dulu ke blog sobat..
2. Didashboard  --> Layout/Rancangan --> pilih Add a Gadget
3. Pilih HTML/Javascript
4. Masukan script nya kedalam kotak tersebut..
Sobat bisa memilih ingin Kotak search yang bagaimana tinggal di pilih jenisnya..

1. Blue And White

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

2. Black and White

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

3. Red and White

 

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

4. White and Red

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

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

6. Tinggal Di Save broo..

Sekian dulu sob artikel tentang membuat Kotak Search Di blog..

Kalo berhasil jangan lupa di share ya sob.. 

Credit and thanks me for : http://wisnu-friskian.blogspot.com

Semoga berhasil SOB

KEEP BLOGGING