Add cute Search Box Widget In Blogger

This is the dream of every blogger that his/her blog will become popular and get more traffic.For this purpose designing is most important because a cool design will attract visitor and make a normal visitor to a daily visitor of the blog.
Today i come with a cool search box widget for blogger.Follow following steps to Add Cool Search Box Widget In Blogger.

How to Add Search Box Widget?

1. Go To Blogger > Layout > Edit HTML
2. Search For ]]></b:skin>
3. And paste the code below just above ]]></b:skin>

 .sbox{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;
}.sbutton{
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;
}
.sbutton:hover{
background:#336699;
}

• Go To Blogger > Design
• Click choose a gadget
• Select HTML/javascript widget
• Paste the following code inside it

<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=”sbox” /></td>
<td width=”75px”><input type=”button” value=”Search” id=”sbutton” alt=”" /></td>
</tr>
</table>
</form>
</div>

Hope all of u like it.Drop comment in the comment box

Get paid to share your links!