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>
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
keren gan lanjutkan... :42
BalasHapusseepp gan..
Hapus