27 May 2013

Beautiful Search Box Widget for Blogger

Today, i am going to share a widget for blogger. This is Search Box Widget. It is different from Google Custom Search box. A beautiful, clean search form is essential element for blogger. Sometime we have hundreds of articles in our blog.A user can find it difficult to navigate through all content.Thus search box can save lots of time.This can improve rank because web surfer will return to your blog to find any blog related item.The implementation is very easy and quick. It is purely CSS3 based widget.

How to add Search Box widget to blogger?
Add search box element is very simple and it is in the same way we add any html/javascript gadget to our blog.Just follow the steps in case you don't know how to add.
1. Login to blogger.Open Dashboard.
2. Now add a HTML/Javascript gadget where you want to place widget.
3. Copy and paste following code.
4..Save the widget.

/******* bloggertrendytricks.blogspot.com *******/
<style>
#BTTSearch {
display: block;
clear: both;
margin: 10px 0;
}
#BTTSearch #BTTSinput {
background: url("http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#BTTSearch #BTTsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
 <div id="BTTSearch">
    <form action="/search">
        <input name="q" id="BTTSinput" type="text" />
        <input value="Search" id="BTTsubmit" type="submit" />
    </form>
</div>

0 comments:

Post a Comment