Search box or web search box and sometimes we call search form, it is a graphical control the element used in internet programs that place on blogger widget or computer program, such as file managers or web browsers. The search box is not a big text field but it is a line text box with a dedicated function of accepting user input for searching contents or something which is available on a blog or website database. The search box is very important to the blog that all blog owners or visitors can find out everything that involved with blog category. Now in this tutorial will give you the way to add a search box on widget sidebar of your blog.
Add Search box on widget sidebar
Step 2: Now go to Template then click on Edit HTML
Step 3: Click anywhere inside the HTML Code area then press Ctrl + F key or Command + F (Mac) to search for ]]></b:skin> tag by copy it and paste in search box then press Enter.
Step 4: Copy below CSS Code and paste in above it.
/*-[ Search Form ]------------------*/
.widget_search h3 { margin-bottom: 0 }
#searchform {
float: left;
clear: both;
width: 88.8%;
padding: 15px 5.6% 5px 5.6%;
}
.navigationnbt #searchform { float: right }
.navigationnbt #searchform fieldset {
padding: 5px 0 5px 15px;
border: 0;
border-left: 1px solid #eee;
}
.sbutton {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvPOqKi4P-mvJYxVNQNVN6kcC9dnRzkIBsuboRGpJGSi_VQ9_nKX81phBmVf2fIRFi1hZBIYa54UsjXIaDR79ZGboc2c4uR_lA7Ri74mYvGJlqcOvTOel8oENMpoE1P9kD8YuqOSQAGrU/s1600/search_image.png) no-repeat center center;
border-radius: 0 4px 4px 0;
border: 1px solid #18667d;
width: 14.8%;
height: 41px;
cursor: pointer;
background-color: #18667d;
text-align: center;
color: white;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.sbutton:hover {
background-color: #0198be;
border-color: #0198be;
}
.main-header #s { width: 150px }
#s {
width: 84%;
border-radius: 4px 0 0 4px;
background: transperant;
border: 1px solid #DDD;
float: left;
padding: 13px 0;
text-indent: 10px;
border-right: 0;
}
Step 5: After you add the CSS Code, then click "Save Template" button
Step 6: Now go to "Layout" link and then add a new HTML/JavaScribe text box by click on "Add a Gadget" link then find out HTML/JavaScribe and click [+]
Step 7: Copy blow code and paste in text area and then click "Save" button.
<form action='/search' class='search-form' id='searchform' method='get'>
<fieldset>
<input id='s' name='q' onblur='if (this.value == '') {this.value = 'Search the site';}' onfocus='if (this.value == 'Search the site') {this.value = '';}' type='text' value='Search the site'/>
<input class='sbutton' type='submit' value='/>
</fieldset>
</form>
