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/AVvXsEgniMzM6oPG6PSlh-P8BACiyPMgQ94_3uq7oZyBw5CzuX8oydT4523_wvHZwD_GaB7H_pIdX96DEjvSwbNUI5O4WphkMgM98tGO8RO0PM3TFtFP9YAWL1oIlyEl5AQ67u8emToZRdv4vNM/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/AVvXsEgniMzM6oPG6PSlh-P8BACiyPMgQ94_3uq7oZyBw5CzuX8oydT4523_wvHZwD_GaB7H_pIdX96DEjvSwbNUI5O4WphkMgM98tGO8RO0PM3TFtFP9YAWL1oIlyEl5AQ67u8emToZRdv4vNM/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/AVvXsEgniMzM6oPG6PSlh-P8BACiyPMgQ94_3uq7oZyBw5CzuX8oydT4523_wvHZwD_GaB7H_pIdX96DEjvSwbNUI5O4WphkMgM98tGO8RO0PM3TFtFP9YAWL1oIlyEl5AQ67u8emToZRdv4vNM/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/AVvXsEgniMzM6oPG6PSlh-P8BACiyPMgQ94_3uq7oZyBw5CzuX8oydT4523_wvHZwD_GaB7H_pIdX96DEjvSwbNUI5O4WphkMgM98tGO8RO0PM3TFtFP9YAWL1oIlyEl5AQ67u8emToZRdv4vNM/s1600/blank.gif"
id="fbutton" /> </form>
</div>

tinggalkan komentarnya....

Artikel Terkait:

tutorial blogger

• cari template klik disini
• Apa Itu SEO?
• Apa Itu JavaScript
• Kelebihan Dan Kekurangan Blogspot dan Wordpress
• Cara Memberi Password Pada Winrar
• APAKAH BLOGGER ITU PAHLAWAN?
• Cara Memasang Tukeran Link Otomatis Dengan Mistery Linky's Magic Wizard
• efek loading blog dengan animasi keyfames
• 9 Cara Membuat Loading Blog 300% Lebih Cepat
• Cara Memasang Tombol Back to Top diatas Footer pada Blog
• Cara Scan Blog dan Website dari Virus dan Malware
• EFEK SHADOW PADA TEXT DENGAN CSS
• Loading Blog dengan Keyframes dari Bawah ke Atas
• menu blog dengan CSS
• CARA MENGUBAH "JOIN THIS SITE" DENGAN GAMBAR FOLLOWERS 999999999
• cara membuat menu berbentuk lingkaran
• Membuat Efek Sliding
• cara membuat tooltip di blog
• cara membuat read more dan add coment
• cara membuat menu navigasi
• cara membuat gambar poting berputar saat di sorsot mouse
• Pentingnya & Manfaat bahasa inggris bagi seorang blogger
• Pengertian Tentang Komentar Kentut Pada Blog
• Cara Membuat Kotak Judul Postingan Jadi Menarik
• Cara Memasang Embed Link di bawah Postingan Blog