Blogger has its own search box widget for their blogs but its design is not very attractive. It is an old school design widget. In this post we will discuss about adding custom search box to a blogger blog. We will also provide 5 Stylish and attractive search box designs for your blogger blogs. These search box designs are applicable to almost any type of blog design. Adding these search boxes to your blog is like a breeze, you just need to copy and paste the code on your blog without any modifications in it.
Is it necessary to add search box in our blog?
Yes, it is very important to add search box in our blog. By using search box blog visitors can search any post in our blog`s archive without any effort. Suppose you have a large blog with thousands of posts then it is very difficult for your blog visitors to find any specific article in your blog by going through the complete archive of your blog posts. If you have search box installed on your blog then visitors can directly search any post by using it. In this way search box helps blog visitors to easily navigate through your blog and get their required information.Add Search box widget to blogger blog
- Go to your blogger dashboard and select your blog.
- Select Layout option.
- Select Add a gadget option.
- Select HTML/JavaScript widget.
- In the HTML/JavaScript widget paste code of the search box widget and save the widget.
Dynamic width ( Expandable ) search box Design
This is the best design among all search box designs. In this design the search box expands on mouse hover on it and goes back to normal when mouse is get away from it. You can customize the color of the box according to your own choice.
Code :
<style>
#wc-searchexpandbox1
{
padding:10px;
}
#wc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#wc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='wc-searchexpand1'>
<form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchexpandbox1">
<input name='search' id='wc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchexpandsubmit1' type='submit' value='Search'/>
</form>
</div>
Clean Search box
Code:
<style>
#wc-searchsimplebox1
{
padding:10px;
}
#wc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:130px;
font:14px verdana;
}
</style>
<div id='wc-searchsimple1'>
<form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchsimplebox1">
<input name='search' id='wc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchsimplesubmit1' type='submit' value='Search'/>
</form>
</div>
Elegant Green
Code:
<style>
#wc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#wc-searchgreenbox1
{
padding:10px;
}
#wc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='wc-searchgreen1'>
<form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchgreenbox1">
<input name='search' id='wc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchgreensubmit1' type='submit' value='Search'/>
</form>
</div>
Dark Black
Code:
<style>
#wc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#wc-searchblackbox1
{
padding:10px;
}
#wc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='wc-searchblack1'>
<form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchblackbox1">
<input name='search' id='wc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchblacksubmit1' type='submit' value='Search'/>
</form>
</div>
Easy Blue
Code:
<style>
#wc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#wc-searchbluebox1
{
padding:10px;
}
#wc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#wc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='wc-searchblue1'>
<form expr:action='data:blog.homepageUrl + "search/"' method='get' id="wc-searchbluebox1">
<input name='search' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='wc-searchbluesubmit1' type='submit' value='Search'/>
</form>
</div>
0 comments:
Post a Comment