Simple Search Bar Widget For Blogger Blog

Search bar Widget For Blogger. I will give the coding for Search Bar. A search Bar is used to search the content inside the blog. Search Bar helps the visit-er to search the content inside the blog.

• Log On to your Blogger Account and go to Template Section.
• And Click the Edit Html.
• After Goto Html Section.
• Press Ctrl+f to find the ]]></b:skin>
• Copy the Below Code and Past Above On it.

.search-box
{
padding:4px;border-radius:6px;
margin:6px 2px 6px 1px;
background:#f9f9f9 ;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:176px;
color:#666;
}
.search-button
{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.search-button:hover
{
background:#336699;
}

• Click The Save Button To Save the template.
• Now Goto Loyout Section and click the add gadget option and select the Html/JavaScript.
• Copy the Below Coding And Past the coding in the html/Java Script location click save button.

<div class=’searchform’>
<form method=”get” id=”searchform” action=”/search”>
<table width=”100%”>
<tr>
<td><input type=”text” style=”width:98%;padding:2px;” value=”Search this blog…” onfocus=”if (this.value == &quot;Search this blog…&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Search this blog…&quot;;}” name=”q” id=”search-box” /></td>
<td width=”75px”><input type=”button” value=”Search” id=”search-button” alt=”" /></td>
</tr>
</table>
</form>
</div>