Add Unique Search Box To Your Blogger

HOW TO ADD UNIQUE CUSTOM SEARCH BOXES TO BLOGGER

• Login to Blogger Dashboard -> Layout.
• Click on Add a Gadget where you wish to place Search Box. 
• Choose HTML/JavaScript from the List. 
• Place any one Search Box code in to it and Save the Gadget.

FIRST SEARCH BOX

<style type="text/css"> #w2b-searchbox{background:url(http://1.bp.blogspot.com/-9AsrC70--7Q/UZtfTrkES3I/AAAAAAAAAOA/MZBBLywCaYM/s1600/search+box+1.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 undefinedthis.value == "Search...") {this.value = ""}' onblur='if undefinedthis.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

SECOND SEARCH BOX

<style type="text/css"> #w2b-searchbox{background:url(http://1.bp.blogspot.com/-5ghzmvFF7_k/UZtfTitwuMI/AAAAAAAAAOE/MByAyrTxbdQ/s1600/search+box+2.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 undefinedthis.value == "Search...") {this.value = ""}' onblur='if undefinedthis.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

THIRD SEARCH BOX

<style type="text/css"> #w2b-searchbox{background:url(http://1.bp.blogspot.com/-upGWgTP_Hpw/UZtfTyaUqZI/AAAAAAAAAOQ/1xzgBvh2ycs/s1600/search+box+3.png) 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>

FOURTH SEARCH BOX

<style type="text/css"> #w2b-searchbox{background:url(http://4.bp.blogspot.com/-IZUjK4AwR5I/UZtfVCvs_pI/AAAAAAAAAOg/fCOv1XUjmPw/s1600/search+box+4.png) 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>

FIFTH SEARCH BOX

<style type="text/css"> #w2b-searchbox{background:url(http://4.bp.blogspot.com/-oO6zOBRJqv0/UZtfUmpoYvI/AAAAAAAAAOY/oR9i6DH3af8/s1600/search+box+5.png) 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>

---

Please Tell Us Your experience And How you feel About This through comment...Thanxxx