Sunday, June 21, 2015

How to add a Colorful Search Box Widget on Blogger

Search Box is an important thing for blog/website. Visitors can search your blog and find a content from your blog they want. As you know Blogger has its own search box, but it's looking very simple. It will look more professional to add a more optimized and colorful search box to your blog.
Today I will share with you beautiful search boxes for Blogger.

Screenshot of Search Box:
Simply open up Blogger, go to Layout > "Add a new gadget".
Now in pop out window search and select for HTML/JavaScript.
And paste code on it:
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #ff6c00;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
And press on "Save" button.
Change some settings:
1) On line 4 you can change the 100% to any size you want to apply to the search box.
2) On line 45 change "#ff6c00" to any color you want for the search button.
3) On line 56 you can change the value of search button, in above code, the value is set to "Search".

Subscribe To Get Free Updates!