How to create Search Box in Blog

Introduction:
Search Box is helpful in searching for a post in a Blog by just entering specific keywords related to post. This post will talk all about creating search box in Blog. It will not take time for you to create for your own blog too.
Just follow the steps. It's simple implementation of Html, css and javascript.

Steps:
1)  Go to your blog Layout and add gadget

HTML/JavaScript

2) give it a title: search box

3) add below text in content

<style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-6OcN2s1_crPSXiieMrsWaWjWUXAtNmPfDmiVjl3z8Pp9V08uZrvOm5mLpAQpYAXLXSCDzjQdXAtMzES3I8-0JsyMnoRnjHKqMG16mySKOckc_MT3iuFBEMNZtDYvzHdqN5fxDza6mcFN/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 5px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyUU-dnY1UktKcI10LSnk_nq5BjkzJpw6qwSQ3J8qSHAfQ4mTXqr62fowQY2jgzd8rIo_vJLIkfJwo9SgEXdebSpDCJ7Hx7XiCYbHXgcZTRZT9fUjASZifpPm3m-EM_sbXUO5LEk6k1qUU/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPngLMg0XVSTeM2efV7XWCQldxeg9UIooYUBUqEkRSne7lpxEG7OFmx0PDBLkEpquQEwkK4YFdSyfTq6fPWBsVq4d950fwH5qS9ZjJu1Ka6CmCktEqiYD66hNTKAGAq0aIE0wrJIAxYYoH/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form> 

 and save it.
We are Done!!

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.