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.
Table of Contents
How to Install Search Box Widget?
Adding CSS Code
- Go To Blogger > Layout > Edit HTML
- Search For ]]></b:skin>
- 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;
}
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
- 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 == "Search this blog…") {this.value = ""}” onblur=”if (this.value == "") {this.value = "Search this blog…";}” name=”q” id=”sbox” /></td>
<td width=”75px”><input type=”button” value=”Search” id=”sbutton” alt=”” /></td>
</tr>
</table>
</form>
</div>
<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 == "Search this blog…") {this.value = ""}” onblur=”if (this.value == "") {this.value = "Search this blog…";}” 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.
Will add this to my blog in future. Seems to be a cool search box.