membuat kotak pencarian berwarna di blog

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box Warna Merah
Contoh Search Box

<style
type="text/css">
#a-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_merah.png)
 no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width:
235px;font-size:14px;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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi_X5hpr8vHbFsaGcv382Hs3DJJv6I4rZeiMMJ12HJC3VeS9SG3JoJWdVuE-kdOmVf8MZyi2IGgteIxJJDJO0XWCHCOSSKXBj8tv6ixn0-bEYqWRJ6sraR7oyv8-noQAftN548KKenyc/s1600/blank.gif"
id="abutton" /> </form>
</div>

<style
type="text/css">
#b-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_kuning.png)
 no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#b-searchform{display: block;padding: 10px 12px;margin:0;}
form#b-searchform #b{padding: 6px;margin:0;width:
235px;font-size:14px;vertical-align:
top;border:none;background:transparent;} form#b-searchform
#bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;} </style> <div
id="b-searchbox">
<form id="b-searchform" action="/search"
method="get">
    <input type="text" id="b" name="q"
value="Search..." onfocus='if (this.value == "Search...") {this.value =
""}' onblur='if (this.value == "") {this.value = "Search...";}'/>      <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi_X5hpr8vHbFsaGcv382Hs3DJJv6I4rZeiMMJ12HJC3VeS9SG3JoJWdVuE-kdOmVf8MZyi2IGgteIxJJDJO0XWCHCOSSKXBj8tv6ixn0-bEYqWRJ6sraR7oyv8-noQAftN548KKenyc/s1600/blank.gif"
id="bbutton" /></form>
</div>

<style
type="text/css">
#c-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_hitam.png)
 no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#c-searchform{display: block;padding: 10px 12px;margin:0;}
form#c-searchform #c{padding: 6px;margin:0;width:
235px;font-size:14px;vertical-align:
top;border:none;background:transparent;} form#c-searchform
#cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;} </style><div
id="c-searchbox">
<form id="c-searchform" action="/search"
method="get">
    <input type="text" id="c" name="q"
value="Search..." onfocus='if (this.value == "Search...") {this.value =
""}' onblur='if (this.value == "") {this.value = "Search...";}'/>     <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi_X5hpr8vHbFsaGcv382Hs3DJJv6I4rZeiMMJ12HJC3VeS9SG3JoJWdVuE-kdOmVf8MZyi2IGgteIxJJDJO0XWCHCOSSKXBj8tv6ixn0-bEYqWRJ6sraR7oyv8-noQAftN548KKenyc/s1600/blank.gif"
id="cbutton" /></form>
</div>

<style
type="text/css">
#f-searchbox{background:url(http://hostinghanifanews.files.wordpress.com/2012/08/kotak_search_warna_abu-abu.png)
 no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#f-searchform{display: block;padding: 12px;margin:0;}
form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align:
top;border:none;background:transparent;} form#f-searchform
#fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;} </style> <div
id="f-searchbox">
<form id="f-searchform" action="/search"
method="get">
    <input type="text" id="f" name="q" value=""/>   <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi_X5hpr8vHbFsaGcv382Hs3DJJv6I4rZeiMMJ12HJC3VeS9SG3JoJWdVuE-kdOmVf8MZyi2IGgteIxJJDJO0XWCHCOSSKXBj8tv6ixn0-bEYqWRJ6sraR7oyv8-noQAftN548KKenyc/s1600/blank.gif"
id="fbutton" /> </form>
</div>

tinggalkan komentarnya....

Tweet