Search Box Pada widget "6 style"

KOTAK SEARCH 6 STYLE

DEMO

Seperti pada postingan saya sebelumnya kotak search Merupakan salah satu alat/media yang Berfungsi

Memudahkan para pengunujung menavigasi Blog atau web yang kita punya,artinya adalah sebuah kotak dimana para pengunujung dapat Lebih mudah menemukan Article atau Produk yang akan mereka cari, Kotak Search ini sendri bekerja secara otomatis dimana Informasi yang anda ketik didalamnya akan dikirimkan ke server untuk memproses Hasil Dan menemukan hasilnya itu sendiri.

Adapun kotak search yang Di bahas kali ini adalah,kotak search dengan 6 macam style dan mempunyai warna yang Berbeda-beda yang bisa sobat pasang pada widget sobat.Untuk penerapannya sendiri adalah 

• Masuk ke Blog anda
• Pada dashbor pilih menu tata letak kemudian
• Pilih Add Gadeget dan
• Copy salah satu kode Dibawah ini ke dalam gadeget yang sesuai selera anda :

SKIN 01

<style type="text/css"> #a-searchbox{ background:url(http://2.bp.blogspot.com/-TFiAlRSWJ9g/UPgqKjadhLI/AAAAAAAAC34/oU4c3NhIqWM/s1600/lostsector-search-box-blue.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-left:20px;width: 205px;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> <center> <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> </center>

SKIN 02

<style type="text/css"> #a-searchbox{ background:url(http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.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-left:20px;width: 205px;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> <center> <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> </center>

SKIN 03

<style type="text/css"> #a-searchbox{ background:url(http://3.bp.blogspot.com/-Cs9SgVp9zCs/UPgqLrR-V-I/AAAAAAAAC4E/-YNbafNnWPc/s1600/lostsector-search-box-gray.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-left:20px;width: 205px;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> <center> <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> </center>

SKIN 04

<style type="text/css"> #a-searchbox{ background:url(http://3.bp.blogspot.com/-BvgOsymky-E/UPgqKjRsbmI/AAAAAAAAC4A/R0ANwGDnidM/s1600/lostsector-search-box-black.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> <center> <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> </center>

SKIN 05

<style type="text/css"> #a-searchbox{ background:url(http://1.bp.blogspot.com/-6YNhrJC-OZc/UPgqMB5Qb9I/AAAAAAAAC4M/WbrKQoexM9A/s1600/lostsector-search-box-red.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> <center> <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> </center>

SKIN 06

<style type="text/css"> #a-searchbox{ background:url(http://4.bp.blogspot.com/-7zTQKWJ1k74/UPgqMPLMCKI/AAAAAAAAC4Q/RfZyk8G44vs/s1600/lostsector-search-box-yellow.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> <center> <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> </center>

Terima kasih,Dan selamat Mencoba semoga bisa bermanfaat buat Sobat Blogger.