Add Simple Yet Cool Search Box Widget In Blogger

searchbox-abt

When ever visitor see your blog article and again want to read so he want to search your blog. Here I share a Add Simple Yet Cool Search Box Widget In Blogger. Follow following steps to Add Simple Yet Cool Search Box Widget In Blogger.

Live Demo

How to Install Search Box Widget?

Adding CSS Code

  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;
}

Adding Cool Search Box Widget with hover in sidebar

  1. Go To Blogger > Design
  2. Click choose a gadget
  3. Select HTML/javascript widget
  4. 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>

I will add some Cool Search boxes with Different Color Schemes, SO Keep Updated…  or Subscribe to Our Free Mail Updates!

Credits

This Simple Yet Cool Search Box Widget is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.

 

1 thought on “Add Simple Yet Cool Search Box Widget In Blogger”

Leave a Comment

Your email address will not be published. Required fields are marked *