Sobat Blogger pastinya sudah tahu dong sama yang namanya kotak pencarian atau Search Engine...? Search Engine adalah widget yang mutlak harus dimiliki oleh sebuah Blog karena memang fungsinya yang begitu Vital sebagai alat kemudahan bagi pengunjung untuk mencari artikel yang mereka inginkan dan tentunya sesuai dengan kata kunci yang mereka ketik...! Disini saya bakal menshare 5 Gaya kotak pencari unik yang kebetulan kode CSSnya saya dapat dari hasil browsing ( Semoga Sobat berkenan untuk berkunjung ke Blog Tersebut )
Untuk Tutorial ini saya bakal memposting langsung dengan demo gambarnya...! Oke daripada ngomong terus mending kita langsung ke TKP ...!
1.Login Dulu ke Blogger
2.Pilih Layout / Tata Letak --> Add a gadget/Tambakan Gadget --> Opsi HTML/Javascript
3.Setelah masuk ke HTML/Javascript sekarang silahkan sobat pilih warna widgetnya dibawah ini sesuai selera...!
A.WARNA MERAH
Ini kode CSS yang harus di copas
<style type="text/css">
#exe-searchbox{background:url(http://2.bp.blogspot.com/-r9ZPNWJubic/TqBZp-73XNI/AAAAAAAAAkc/_qnbg8EXakU/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> |
B.WARNA BIRU
Dibawah ini adalah Kode Yang Harus di gunakan
<style type="text/css">
#exe-searchbox{background:url(http://1.bp.blogspot.com/-rWeiYWCmHIk/TqBZooXrghI/AAAAAAAAAkM/Fvm-gfaIuf8/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> |
C.WARNA HIJAU
Berikut Ini adalah kode yang harus digunakan...!
<style type="text/css">
#exe-searchbox{background:url(http://3.bp.blogspot.com/-vxXsk24PYUc/TqBZpWE4scI/AAAAAAAAAkU/_0dLPsFRHYQ/s1600/Green-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> |
D.WARNA KUNING ORANGE
Dibawah ini kode yang harus digunakan...!
<style type="text/css">
#exe-searchbox{background:url(http://2.bp.blogspot.com/-8Khpb3lvlkw/TqBZnRPaR5I/AAAAAAAAAj8/OBUsJJlhATo/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> |
E.WARNA HITAM
Berikut adalah kode yang harus digunakan...!
<style type="text/css">
#exe-searchbox{background:url(http://2.bp.blogspot.com/-YK8N1e-QfCc/TqBZoFG7nYI/AAAAAAAAAkE/PHRUhGRfaZU/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> |
UPDATE
Berikut Saya Tambahkan Lagi Kode-Kodenya Biar Pengunjung Makin Puas.
 |
| Kotak Search 1 |
<style type="text/css">
#a-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.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="http://img1.blogblog.com/img/blank.gif"
id="abutton" /> </form></div>
 |
| Kotak Search 2 |
<style type="text/css">
#b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.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="http://img1.blogblog.com/img/blank.gif"
id="bbutton" /></form></div>
 |
| Kotak Search 3 |
<style type="text/css">
#c-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.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="http://img1.blogblog.com/img/blank.gif"
id="cbutton" /></form></div>
 |
| Kotak Search 4 |
<style type="text/css">
#d-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png)
no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#d-searchform{display: block;padding: 12px;margin:0;}
form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align:
top;border:none;background:transparent;} form#d-searchform
#dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;} </style> <div
id="d-searchbox"><form id="d-searchform" action="/search"
method="get"> <input type="text" id="d" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif"
id="dbutton" /> </form></div>
 |
| Kotak Search 5 |
<style type="text/css">
#e-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png)
no-repeat scroll center center
transparent;width:307px;height:50px;disaply:block;}
form#e-searchform{display: block;padding: 12px;margin:0;}
form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width:
215px;font-size:14px;vertical-align:
top;border:none;background:transparent;} form#e-searchform
#ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align:
top;border:none;background:transparent;} </style> <div
id="e-searchbox"><form id="e-searchform" action="/search"
method="get"> <input type="text" id="e" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif"
id="ebutton" /></form></div>
 |
| Kotak Search 6 |
<style type="text/css">
#f-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.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="http://img1.blogblog.com/img/blank.gif"
id="fbutton" /> </form></div>
Mungkin cukup sekian tutorial dari saya dan semoga bermanfaat buat para
sobat blogger...!
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Kumpulan Widget Search Keren Untuk Blog (Nuryadi Blog's). Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
