Add Good Looking Search Box To Your Blog

This search box is looking very beautiful.If you want to add this widget to your blog then you are at right place,you need lot of css code and html code to make this template but i make it very easy to install i put css code in between <style></style> by which person not knowing more about css and html can also easily add this gadget to there blog.

Follow below steps to add this gadget to your blog-

• Go to blogger dashboard.
• Now click on layout tab.
• Now Add html/Javascript
• Paste below code there and save it.

<Style>
#w2bOldSearch {
display: block;
clear: both;
margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-aeyw3dFoiw0nZaMfTqw8eo-FbBOJI6AFRluDvSuUpYeIsspRTdubkBI673XL_jas22idxanlFN_x_zH3uKtP1fBYPxqmoV-OJFWhIrteaGbcwePHWC3AbNoxPCU9pi9b9eUsaDslNMKH/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;
}

#w2bOldSearch #w2bSsubmit {
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="w2bOldSearch">
<form action="/search">
<input type="text" name="q" id="w2bSinput" />
<input type="submit" value="Search" id="w2bSsubmit"/>
</form>
</div>

Now preview your blog and enjoy!!!


If you love our post then share it or comment golden words below.