Good looking search bar for your blog or website

Post written by
In this tutorial i will show you how to make a good looking Google+ style searchbar for your own blog or website with simple CSS and HTML codes.  
First you have to work with the HTML code of search bar so that we can display a simple search bar (we will give this box some style with CSS) you can post the following HTML code anywhere in your website so that it can execute in your blog. You have to make some changes in this HTML code to work on your blog or website (highlighted in red)


<form action="http://www.google.com/search" class="formupsearch" method="get">
<input class="searchinputarea" maxlength="255" name="q" size="25" type="text" value="" x-webkit-speech="true">
<input class="boxsearch123" type="submit" value="search">
<input class="checkbutton23" name="sitesearch" type="radio" value="">
<input checked="true" class="checkbutton23" name="sitesearch" type="radio" value="stramaxon.blogspot.com">
<div class='mpt-links'>
<a class='mdt-oplink' href='stramaxon.blogspot.com/2012/03/good-looking-search-bar-for-your-blog.html' target='blank'>Get this bar<a class='mdt-oplink2' href='http://stramaxon.blogspot.com' target='blank'> -by Stramaxon</a>
</div>
</form>

This HTML code is for rendering the search box, before you add any CSS the search bar will look very simple, but after giving touch of CSS it will look completely different.


On line 1 you can change the http://www.google.com/search to http://www.yoursite.com/search. if you want the search results to appear on your blog/website.
On line 5 change the value="stramaxon.blogspot.com" to value="yoursite.com", or your blogspot blog domain.                                        


I don't know that you know about CSS or not but it's my job to tell you how to make it work, if you are a newbie this guide will help you through, other blogspot users can paste their CSS either in HTML template with <style type='text/css'> inline CSS after </head> , or by going to Blogger Dashboard >> Template >> Customize >> Advanced tab >> Add CSS there you may paste the CSS code directly without adding any other attributes.


CSS codes

If you just want the CSS and don't want read about it, here's the full CSS. (Copy the full CSS code and add it to your blog - How to add CSS)


CSS is most important here to add good looking style to the search box, you can make any desired changes into the CSS to fit your needs, you can change the color, width max length etc.
If you want you can add more CSS styles to the code, i have not added the position attribute to the CSS as it's on you and your site how to maintain the position, the only position i added is to maintain the position of the search box.
I have given the CSS code for all elements separately but remember you may paste these CSS all together. I have shown the CSS separately only so that you can understand it better. 


.searchinputarea {
border: 1px solid lightGrey;
height: 26px;
width: 180px;
box-shadow: 0px 0px 0px transparent;
-webkit-transition: box-shadow 1s ease-in-out;
padding-left: 8px;
font-size: 15px;
font-family: verdana;
padding-top: 2px;
}



.searchinputarea:focus {
border: 1px solid lightGrey;
box-shadow: 0px 0px 10px rgba(0, 110, 250, 0.2);
outline: 1px solid #ECECFA;
}

This code was to style the text area of the search box, change any style you want. The .searchinputarea:focus adds a great light effect once you click on the input area, a flash of blue color appears, you can change the color to any color by changing it from blue and you can remove the effect by deleting entire code after .searchinputarea:focus.

.boxsearch123 {

position: relative;
right: 0px;
vertical-align: top;
cursor: pointer;
width: 40px;
height: 31px;
line-height: 100%;
padding: 0;
font-size: 0;
text-indent: -999px;
color: transparent;

background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFKSURBVHjalNJPK0RRHMbx4//fjEJSmqwsZmdhvAvFSjGRt8BGeQEWLC1Y0WSjlJWykUJs2GkysVEjm9lokjJc38Nzm9O592rmV5/umXt+83TOuccEQWBkBGt4QFWesYG00xcRDjK4C2pVwZvzu4Sp/0L6cKVm+8cjLGEeeZQ194SxpJCcmt6xHtM0hw/17CSFnKjhHL0JS86r5wLd/nyzMabf/NU1Kia+TvUcxrg/aUO+NO40ydWiZ1UiIS8aZ5GKCehATuNXPEY62NMMvmVPX6sNrdr/puY+sZJ0sF04cO5EAdvYwq3z3n7qRaSSLtuo7od7wQLn0xe1GlvHmHRDmn6TarWAaQyiHSWc4RKHyKivgGXchGcSx57FgPdu1VvhPbLuduqR0o0NvPNLNxJi9cQEzTYaEgbtKmAfQ/7B1lv2dk+giPKPAAMA+57Ayn+WvQEAAAAASUVORK5CYII=') no-repeat #4D90FE center;
border: 1px solid hsl(217, 84%, 56%);
-webkit-appearance: none;
-webkit-border-radius: 0px;
-webkit-transition: background .5s;
}

.boxsearch123:hover
{
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFKSURBVHjalNJPK0RRHMbx4//fjEJSmqwsZmdhvAvFSjGRt8BGeQEWLC1Y0WSjlJWykUJs2GkysVEjm9lokjJc38Nzm9O592rmV5/umXt+83TOuccEQWBkBGt4QFWesYG00xcRDjK4C2pVwZvzu4Sp/0L6cKVm+8cjLGEeeZQ194SxpJCcmt6xHtM0hw/17CSFnKjhHL0JS86r5wLd/nyzMabf/NU1Kia+TvUcxrg/aUO+NO40ydWiZ1UiIS8aZ5GKCehATuNXPEY62NMMvmVPX6sNrdr/puY+sZJ0sF04cO5EAdvYwq3z3n7qRaSSLtuo7od7wQLn0xe1GlvHmHRDmn6TarWAaQyiHSWc4RKHyKivgGXchGcSx57FgPdu1VvhPbLuduqR0o0NvPNLNxJi9cQEzTYaEgbtKmAfQ/7B1lv2dk+giPKPAAMA+57Ayn+WvQEAAAAASUVORK5CYII=') no-repeat #4D90FE center;
border: 1px solid #2F5BB7;
}

.mpt-links a
{
    font-family:'helvetica';
    font-size:10px;
    text-decoration:none !important;
    position:relative;
    left:31px;
    bottom:3px;
}    
.mdt-oplink2 {
    color:grey !important;
} 

This code will style the search button next to the input area, the search button takes all credit for the good looks, the next line of code that has :hover defines that what the box should change the style to when it's being hovered. 

.checkbutton23 {
display: none;
}

Now add this 3 line of code to hide the check button.


That's all now save the changes and preview your new search box for your website, if there's problem in this code then feel free to comment and subscribe to our site for more web design  helps. 


Related Post : Add new handwriting fonts in your blog or website