10 Stylish Search Boxes For Blogger

0 Friday, February 20, 2015 Edit this post

Search box is a very important thing in a blog because it helps visitors to find what they are looking for? If you observe, search box not o...

10 Stylish search boxes for blogger | 101helper

Search box is a very important thing in a blog because it helps visitors to find what they are looking for? If you observe, search box not only helps visitors to reach the posts they are looking for but also help you to increase your blog page-views as by search somethings visitors actually increases your page-views. Blogger has built-in search box and can be easily added from layout > add a gadget > Search box. But it is too simple and doesn't go with stylish blogs, so here I am going to share 10 different styles of search boxes for blogger blogs along with step by step method to use them, so follow below steps and choose the search box to add it in your blog.

You might also like to read: Search boxes with different styles for blogger.

How to add stylish search box to your blog:

Step 1: Go to blogger dashboard and select your blog in which you want to add stylish search box.

Step 2: Select layout in the menu on left side and click on add a gadget.

Step 3: Scroll down to Html/javascript and click on it.

Step 4: Copy code of desired search box from below:

Style 1(Responsive search box):

Responsive search box for blogger | 101helper

Responsive search box with cool effect for blogger | 101helper

<section class="webdesigntuts-workshop">

<form action="/search" method="get">
<input autocomplete="off" name="q" placeholder="What are you looking for?" type="text" value="" /><button>Search</button>
</form>
</section>

<style>
@import url(http://fonts.googleapis.com/css?family=Cabin:400);

.webdesigntuts-workshop {
background: #151515;
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}
.webdesigntuts-workshop:before {
background: #444;
background: -webkit-linear-gradient(left, #151515, #444, #151515);
background: -moz-linear-gradient(left, #151515, #444, #151515);
background: -o-linear-gradient(left, #151515, #444, #151515);
background: -ms-linear-gradient(left, #151515, #444, #151515);
background: linear-gradient(left, #151515, #444, #151515);
top: 192px;
}

.webdesigntuts-workshop:after {
background: #000;
background: -webkit-linear-gradient(left, #151515, #000, #151515);
background: -moz-linear-gradient(left, #151515, #000, #151515);
background: -o-linear-gradient(left, #151515, #000, #151515);
background: -ms-linear-gradient(left, #151515, #000, #151515);
background: linear-gradient(left, #151515, #000, #151515);
top: 191px;
}

.webdesigntuts-workshop form {
background: #111;
background: -webkit-linear-gradient(#1b1b1b, #111);
background: -moz-linear-gradient(#1b1b1b, #111);
background: -o-linear-gradient(#1b1b1b, #111);
background: -ms-linear-gradient(#1b1b1b, #111);
background: linear-gradient(#1b1b1b, #111);
border: 1px solid #000;
border-radius: 5px;
box-shadow: inset 0 0 0 1px #272727;
display: inline-block;
font-size: 0px;
margin: 150px auto 0;
padding: 20px;
position: relative;
z-index: 1;
}

.webdesigntuts-workshop input {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}

.ie .webdesigntuts-workshop input {
line-height: 40px;
}

.webdesigntuts-workshop input::-webkit-input-placeholder {
color: #888;
}

.webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}

.webdesigntuts-workshop input:focus {
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: -webkit-linear-gradient(#333933, #222922);
background: -moz-linear-gradient(#333933, #222922);
background: -o-linear-gradient(#333933, #222922);
background: -ms-linear-gradient(#333933, #222922);
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #efe;
outline: none;
}

.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
color: #efe;
}

.webdesigntuts-workshop input:focus:-moz-placeholder {
color: #efe;
}

.webdesigntuts-workshop button {
background: #222;
background: -webkit-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -ms-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}

.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}

.webdesigntuts-workshop button:active {
background: #292929;
background: -webkit-linear-gradient(#393939, #292929);
background: -moz-linear-gradient(#393939, #292929);
background: -o-linear-gradient(#393939, #292929);
background: -ms-linear-gradient(#393939, #292929);
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}

@-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}

@-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}

@-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}

@-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}

@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}

</style>

Customization:

To increase or decrease width of the search box according to your needs, make changes in highlighted part of above code.

Style 3(simple search box for blogger):

Style 4(Cool search box for blogger):

Style 5(Blue colored slide-in search box):

Blue colored slide-in search box for blogger | 101helper

<div class="search">
<input class="search_box" type="checkbox" id="search_box" />
<label class="icon-search" for="search_box"></label>
<div class="search_form">
<form action="/search" method="get">
<input autocomplete="off" name="q" placeholder="What are you looking for?" type="text" value="" />
</form>
</div>
</div>
<style>
@import "//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";
.search{
position:relative;
display: inline-block;
left:170px;
}
[class^="icon-"]{
background: #3498db;
color:#fff;
border-radius:5px;
display:inline-block;
padding:6px 7px 7px;
font-size:18px;
text-shadow:1px 1px 2px #21638F;
box-shadow: inset 0px 0px 0px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
cursor: pointer;
z-index:10;
position:relative;
}
[class^="icon-"]:hover{
background: #5dade2;
text-shadow:0px 0px 0px #21638F;
box-shadow: inset 0px 0px 8px #21638F;
transition:all 0.5s ease;
-webkit-transition:all 0.5s ease;
}
.search_form{
background: #5dade2;
position:absolute;
z-index:0;
padding:0px 5px;
right:0;
top:15px;
overflow: hidden;
border-radius:10px;
width: 20px;
height:0px;
transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
-webkit-transition: height 0.2s ease-out 0.5s , top 0.2s ease-out 0.5s, padding 0.2s ease-out 0.5s, width 0.3s ease-out 0.2s;
}
.search_form form{
opacity:0;
transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
}
.search_form input{
background:#fff;
border:none;
}
.search_form input[type='text']{
border-radius:5px 0 0 5px;
width:150px;
margin:0px 1px 0px 0;
padding:0px 5px 1px;
min-height:23px;
}
.search_form input[type='submit']{
border-radius:0 5px 5px 0;
text-transform:uppercase;
font-size:11px;
padding:0px 5px;
min-height:24px;
margin:0px 0px 0px 0;
cursor: pointer;
}
.search_box{
visibility: hidden;
}
.search_box:checked~.search_form{
width: 213px;
height:24px;
padding:5px;
top:35px;
transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
-webkit-transition: height 0.2s ease-out, top 0.2s ease-out, padding 0.2s ease-out, 0.3s width ease-out 0.2s;
}
.search_box:checked~.search_form form{
opacity:1;
transition:0.3s all ease-out 0.5s;
-webkit-transition:0.3s all ease-out 0.5s;
}

</style>

Style 6(Smooth milky search box for blogger):

Smooth milky search box for blogger | 101helper

Stylish search box for blogger | 101helper

<style>

.cf:before, .cf:after{

content:"";

display:table;

}

.cf:after{

clear:both;

}

.cf{

zoom:1;

}

/* Form wrapper styling */

.form-wrapper {

width: 450px;

padding: 15px;

margin: 150px auto 50px auto;

background: #444;

background: rgba(0,0,0,.2);

border-radius: 10px;

box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);

}

/* Form text input */

.form-wrapper input {

width: 330px;

height: 20px;

padding: 10px 5px;

float: left;

font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';

border: 0;

background: #eee;

border-radius: 3px 0 0 3px;

}

.form-wrapper input:focus {

outline: 0;

background: #fff;

box-shadow: 0 0 2px rgba(0,0,0,.8) inset;

}

.form-wrapper input::-webkit-input-placeholder {

color: #999;

font-weight: normal;

font-style: italic;

}

.form-wrapper input:-moz-placeholder {

color: #999;

font-weight: normal;

font-style: italic;

}

.form-wrapper input:-ms-input-placeholder {

color: #999;

font-weight: normal;

font-style: italic;

}

/* Form submit button */

.form-wrapper button {

overflow: visible;

position: relative;

float: right;

border: 0;

padding: 0;

cursor: pointer;

height: 40px;

width: 110px;

font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';

color: #fff;

text-transform: uppercase;

background: #d83c3c;

border-radius: 0 3px 3px 0;

text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);

}

.form-wrapper button:hover{

background: #e54040;

}

.form-wrapper button:active,

.form-wrapper button:focus{

background: #c42f2f;

outline: 0;

}

.form-wrapper button:before { /* left arrow */

content: '';

position: absolute;

border-width: 8px 8px 8px 0;

border-style: solid solid solid none;

border-color: transparent #d83c3c transparent;

top: 12px;

left: -6px;

}

.form-wrapper button:hover:before{

border-right-color: #e54040;

}

.form-wrapper button:focus:before,

.form-wrapper button:active:before{

border-right-color: #c42f2f;

}

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */

border: 0;

padding: 0;

}

</style>

<button type="submit">Search</button>

</form>

Customization:

You can customize the width of this search box along with its search button background color according to your needs. To increase or decrease width of search box or button make changes in that part of above code which is highlighted by blue color. Take care of both widths(button and search box) while making any changes otherwise you search box will look irregular, and to change color of search button replace its color code with desired color code(background: #e54040;).

Style 8(Simple search box with go button):

Animated search box for blogger | 101helper

Search box for blogger with hover effect | 101helper

<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="➜"/>
</form>
</div>
</div>
<style>
/***********************
* Essential Structure *
***********************/
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}

.flexsearch--form {
overflow: hidden;
position: relative;
}

.flexsearch--input-wrapper {
padding: 0 66px 0 0; /* Right padding for submit button width */
overflow: hidden;
}

.flexsearch--input {
width: 100%;
}

/***********************
* Configurable Styles *
***********************/

.flexsearch--input {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 40px;
padding: 0 46px 0 10px;
border-color: #888;
border-radius: 35px; /* (height/2) + border-width */
border-style: solid;
border-width: 3px;
margin-top: 15px;
color: #333;
font-family: 'Helvetica', sans-serif;
font-size: 26px;
-webkit-appearance: none;
-moz-appearance: none;
}

.flexsearch--submit {
position: absolute;
right: 0;
top: -10px;
display: block;
width: 60px;
height: 60px;
padding: 0;
border: none;
margin-top: 20px; /* margin-top + border-width */
margin-right: 5px; /* border-width */
background: transparent;
color: #888;
font-family: 'Helvetica', sans-serif;
font-size: 27px;
line-height: 60px;
}

.flexsearch--input:focus {
outline: none;
border-color: #2288bb;
}

.flexsearch--input:focus.flexsearch--submit {
color: #333;
}

.flexsearch--submit:hover {
color: #2288bb;
cursor: pointer;
}

::-webkit-input-placeholder {
color: #888;
}

input:-moz-placeholder {
color: #888
}

</style>

Step 5: Paste it into Html/javascript window and click on save, congratulations you are done successfully!

Customization:

You can customize any of the above search box if you have knowledge about CSS, if you don't have any experience in CSS then don't make any changes otherwise the search box you are using may stop working or look improper. One thing which is common in all above search boxes is Placeholder which I have highlighted by blue color in each code, you can customize it according to your needs. Placeholder is the text which lies inside the search box e.g search here, search this site, type here to search, search... etc.

If you have any question feel free to ask me below in comments. Follow and subscribe to get instant updates about blogger gadgets. Share this post with others and help me spread 101Helper.

Copyright 101Helper, All rights reserved | do not copy. Incase of any copyright violation you will be reported to Google. Read more about 101Helper Terms and conditions here.

Search tags: 10 Stylish search boxes for blogger, Smooth search box for blogger, white search box for blogger, responsive search box for blogger, black search box for blogger, Green search box for blogger, Animated search box for blogger, Simple search box for blogger, Slide-in search box for blogger, Cool search box for blogger, 101helper gadgets for blogger.