How to Add Stylish Search Box In Blog

Dear We Have Best 5 Search Box Design for Blog. Installation method is Very Easy .Just In 3 Steps you can change your Search Box Design on your own choice ...

1) Log into Blog Account
2) Click on Layout and then Click on Add Gadget
3) Click on HTML/JAVA Script and add the Following Code of Your own Choice

1)   Black and white color Search box:

Code For this Search Box

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


2) White and Red Search Box

CODE For this Search Box

<style type="text/css"> #nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhiXHyAhPRvGpk6M9mEcWAXo82iIkaJKHFzSS0snGLOxbcmPPQ6NY1BpNprPBXXbxnyW8L8o4nPKCgrAFmwcaKEBYVIEpNLsqiLI87cLoqb8etwyxBbqy7TmpqznTXA7rToLQ9d3d_l-4/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 12px;margin:0;} form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="nbc-searchbox"> <form id="nbc-searchform" action="/search/max-results=8" method="get"> <input type="text" id="s" name="q" value=""/> </form> </div>


3)   White and Red Search Box:

                  


Code For This Search Box


<style type="text/css"> #nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidJ3QUpEBWrOn7q-eEsioiqKh9CpDW0a20LI_gtwxvl5RQY3-gRXvu3rW_j3UqZUXako1MZ9Plel65VCrXnGhp-W5VYQwjhuSxP0iDXfaLR__JyT8SWnGZS2JSGyfIG5HrU9QJDUHYm-k/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#nbc-searchform{display: block;padding: 10px 12px;margin:0;} form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="nbc-searchbox"> <form id="nbc-searchform" action="/search/max-results=8" 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...";}'/> </form> </div>


4) Stylish Floating Box :

 

Code For This Search Box



<style type='text/css'> /*<![CDATA[*/ #sbutton { background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe; border: 1px solid #3079ED; border-radius: 2px 2px 2px 2px; color: #FFFFFF; height: 27px; min-width: 76px; padding: 0 21px;padding-bottom: 2px; } #sbutton:hover{ background-color: #357AE8; background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: linear-gradient(top, #4d90fe 0%,#357ae8 100%); border: 1px solid #2F5BB7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);} #simg { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtqyV9JUo9SvtOA-XH8omf8jxbOa0JDNFq_1nWUC2Uf3YBlg8_VdT5Ft4i0FPKhyFvNo2JyAWV8g7n4se6vJU7KFpjFfsGGQl5SRe1ay13dkvXwgv2Ydz5mAaTm0sbldBSFnVuI8fRYg/s1600/noxdo_blogspot_com_Search-icon2.png) no-repeat scroll 0 0 transparent; display: inline-block; height: 14px; margin: 0; width: 17px;z-index:101; }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;} #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;} #s:focus {width: 200px;} .noop-searchbox { display: block; position: fixed; right: 12px; top: 1%; max-width: 300px;min-width: 238px; z-index: 100; } /*]]>*/ </style> <div class='noop-searchbox' id='noop-searchbox'> <form action='/search/max-results=8' id='noop-searchform' method='get'> <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/> <button id='sbutton' type='submit'><span id='simg'></span></button> </form> </div>


5) Easy Blue Search  Box :

Code For This Search Box
    <style> #nbc-searchblue1 { background: rgb(37,141,200); /* Old browsers */ background: -moz-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */ border-radius:10px; width:290px; } #nbc-searchbluebox1 { padding:10px; } #nbc-searchbluesubmit1 { border:1px solid orange; background: orange; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchblueinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style> <div id='nbc-searchblue1'> <form action='/search/max-results=8' method='get' id="nbc-searchbluebox1"> <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/> <input id='nbc-searchbluesubmit1' type='submit' value='Search'/> </form> </div>