Kumpulan Kotak Pencarian Cantik Untuk Blog dan Website

Berikut ini adalah 6 ( enam ) kotak pencarian cantik yang bisa di pasang di Blog atau Website sobat. sehingga dapat menambah keindahan dan kecantikan blog lewat penampilan kotak pencarian ( Search Box ).

Silahkan pilih yang sesuai dengan selera sobat.......

1. Model 1 ( Hitam Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8EL2I3IwZRaj8usndKxEnccDOBqLJ9nxoy3oje8sQPKxqaQyMXa2eqHbc4tRM4siXI-8RulseRchCDgJbOowinTRceqKN8q7_RggDVN6ddJh03r9VtETi0bqapF_jvKJ3n5AVVhq7NvCK/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /> </form> </div>

2. Model 2 ( Kuning Putih )

<style type="text/css"> #w2b-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#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /> </form> </div>

3. Model 3 ( Merah Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0irfimrbAD9hBqU9uplSY3oe_tkVB7eBzu50Mk0vtP2cp8ePPaCz41zXI_mC7aIEPCvTWll9xpcIxnmpgRvYQmqiAIHBGBDNnAg78_LUfMtNwFzaaS1uDa94-6Epn9Zr3JQiECTPHc9aO/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 10px 12px;margin:0;} form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /> </form> </div>

4. Model 4 ( Krem Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq00Hv0CzZS18jSr0Pxnn514IfSO6poGz9byM6chmN_YEKnCw9RMJFz1wYEc-zlWY10AA8SBmZwyFQVGK-Ea_Y5MFr7m4ya10ns6xWLJh_nMwaJqeEA6p2Syz6XimqINbRMTjnhrfhub0z/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

5. Model 5 ( Blur Hitam Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSJjZJS2y4UX_bH-NqD6JXlBDIhuZYIDGSTxe1sgOWnNdITWDSaV6e6oIIAeJpIXf_jsXdEJKYfRzfGRyLRIEk35zEhvedSKd7c-GYycEQ2mPUCatl4qTeNiLzhHgQyaFRwhyphenhyphen_ys1rUU6/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

6. Model 6 ( Biru Putih )

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vfIs3bZR5nUYJ0hCOoPBnLEo-Wx0WanrRaLDkV0BZfWoF6h-SITmLh8SbQpRcNiPZNoV_BrsthBjxAq_Acm_eswUxJypV2w40kXIabd9uH0a2hGIbnjN3JqDcPw6OLFHmAh_vdHNspD-/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#w2b-searchform{display: block;padding: 12px;margin:0;} form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="w2b-searchbox"> <form id="w2b-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value=""/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Cara memasang nya adalah sebagai berikut :

1. Login ke BLogger
2. Pilih Elemen Rancangan
3. Pilih Add Gadget

4. Pilih Java script/ HTML

5. Simpan gadget

6. Selesai dan lihat hasilnya.

Itulah ke 6 kotak pencarian dan tutorial cara memasangnya yang saya rasa menjadi pilihan untuk ditempelkan pada Blog ataupun Website dan semoga menjadi ada gunanya.


Salam Blogger,

h72