Beautiful Search Boxes For Blog And Website

Today I Will Tell You How To Add HTML Code In Blogger In Easy Steps...............

Step 1 : Go To Your Blog Layout.
Step 2 : Click "Add a Gadget" Button.(Like Below)

Step 3 : Then Select The HTML / JAVASCRIPT .

Step 4 : Now Add Following Code In That Window.

Style 1

<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ELADdLPbd0DZVC6Gnkxqr_lYBpNyVQ8f2r_33aOoLxwiAb1C9gsaIPblUkO9ZZPsfDrkeV67lQfHdj5yp91XdGtYeNxbSadoYTmgx7jyX0ejwiIvmkdduUp_sn3FwoWTzEQOKoK0BiWQ/) 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>





Style 2


<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkPIb5ACciaAjfwnYm__8bCKaQDMYQsFErcNXg3-mzfV2vd0IvuDtuSp5kkINvqce1AD4bVXt3pv3Hq1geqQVLP_RIxRyjZfKed6edU8mGmfSt2GXasfzwFb1jbaIAFYodEQCantMt_Hp/) 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>

Style 3


<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTXwuh8EXVlAbjmayTtGsju6PUJd31sWcDY58FRZCV5rSs5t7Lc1FEmPvXNH0jrH7bvaJ8_mHczFj60FZdcRPNGr-sF72EuEqNITbiXaYCxaH3eORzQMa4ZgSnmzoWPteEP_KlZPcBftLf/) 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>

Style 4


<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNtWbnf5L85S-2-gmBygN5_GanFKSTWOGp_u_OTkrmw7wKO5d6bGbrYysszmlgR0YVgWjbaATEAVRU3mtN9XexmqDGYQzmXnOBjAB7A0Wr6AfuXJezkvUx98239nHZkv5uKEP1uxs0LF1h/) 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>

Style 5


<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7k7F_KLT8MD5nU5xngzf8kMkDQIIiwL3kHRUk6sbOOkDZdpX1RnzperAZYGxVm7a1GiknDFb5O5WExu0coAm48U58mt5judeQCJubADjrg1LqQMWo772mjmEXRNAsF7GLp3M2OuCOj-N/) 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>

Style 6


<style type="text/css"> #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtlp3C99tgdymVYozhORIVgCVPTMQLRVaTiRXDCY5_KV3BEASRezzWuhMERt6zD7zyTEDSfSVcEjdtaQyQv3Fw-qhUr3Jly8k2KjZ8bLTfL1hEuWvXBgZbjOmULGm2OUYneOeLvKtG27er/) 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>