Wednesday, 3 June 2015

Stylish and Beautiful Search Boxes for Blogger

It is necessary to add search box in our blog so that blog visitors can search any post in our blog`s archive with less effort. If your blog contains thousands of posts then it is very difficult for a blog reader to find any specific article in your blog by going through the complete archive of your blog posts. But if you have search box installed in your blog then readers can directly search any article by using it. In this way search box helps blog readers to navigate easily throughout your blog.
Blogger has its own search box widget for blogger blogs but its design is dull and undesirable. So in this tutorial we will discuss about adding custom search box to a blogger blog. You just need to copy and paste the code in your blog without any modifications and that it. Let's start.
It is recommended to backup your blog in case something goes wrong before you make any changes in your blogger template.
To add search boxes in blog,
Go to Blogger dashboard after you signing in your blogger account and select 'Layout'. You can also select the 'Layout' from dropdown menu of more options (as shown in the fig. below).


Click on 'Add a Gadget
  1. Select 'HTML/Javascript'
  2. Choose any of these search boxes, copy the code of your chosen search box and paste it within the 'HTML/JavaScript' area. Hit 'Save' (drag and place that widget where you want to display your search box). Let's start with different search boxes.
Clean Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
#blr_clean_search_box {   padding:10px;}#blr_clean_search_input {   border:1px solid #dcdcdc;   background:#fff;   padding:5px;   font:14px Verdana, Sans-serif;   color:#555;   outline:none;   width:200px;}#blr_clean_search_input:focus {   border:1px solid #ffa500;}#blr_clean_search_submit {   border:1px solid #ffa500;   background:#ffa500;   padding:5px;   font:14px Verdana, Sans-serif;   color:#fff;}</style>
<div id="blr_clean_search">    <form expr:action="/search" method="get" id="blr_clean_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_clean_search_input" />        <input type="submit" value="Search" id="blr_clean_search_submit" />    </form></div>
Dynamic Width Search Box
Under normal condition:
Under focused (with mouse) condition:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style type="text/css">blr_dynamic_width_search_box {   padding:10px;}#blr_dynamic_width_search_input {   border:1px solid #dcdcdc;   background:#fff;   padding:5px;   color:#666;   font:14px verdana;   transition: width .6s;   -webkit-transition: width .6s;   -o-transition: width .6s;   -moz-transition: width .6s;   width:60px;   outline:none;}#blr_dynamic_width_search_input:focus {   border:1px solid #111111;   width:200px;}#blr_dynamic_width_search_submit {   border:1px solid #111111;   background:#111111;   padding:5px;   color:#fff;   font:14px verdana;}</style>
<div id="blr_dynamic_width_search">    <form expr:action="/search" method="get" id="blr_dynamic_width_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_dynamic_width_search_input" />        <input type="submit" value="Search" id="blr_dynamic_width_search_submit" />    </form></div>
Black And White Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">#blr_black_white_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-b5ACK-4xCHs/Un9kVUr3yZI/AAAAAAAAC5E/IJBSChoYmgM/s1600/black_white_image.png') scroll 50% 50% no-repeat;   width:307px;   height:50px;   display:block;}#blr_black_white_search_box {   display:block;   padding:10px 12px;   margin:0;}#blr_black_white_search_input{   padding:6px;   margin:0;   width:233px;   font-size:14px;   vertical-align:top;   background:rgba(0,0,0,0);   border:none;   outline:none;}#blr_black_white_search_submit {   margin:0;   margin-left:2px;   padding:0;   height:30px;   width:30px;   border:none;   background:rgba(0,0,0,0);   outline:none;}</style>
<div id="blr_black_white_search">    <form expr:action="/search" method="get" id="blr_black_white_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_black_white_search_input" />        <input type="image" id="blr_black_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Red-Gainsboro Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type="text/css">#blr_red_gainsboro_search {   background:rgba(0,0,0,0) url('http://4.bp.blogspot.com/-y6oYgJxzYfE/Un9luyNy9xI/AAAAAAAAC6M/VXWLZa0CJF8/s1600/white_image.png') scroll 50% 50% no-repeat;   width:307px;   height:50px;   display:block;}#blr_red_gainsboro_search_box {   display:block;   padding:12px;   margin:0;}#blr_red_gainsboro_search_input {   padding:6px 6px 6px 26px;   margin:0;   width:213px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_red_gainsboro_search_submit {   margin:0;   margin-left:2px;   padding:0;   height:30px;   width:30px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>
<div id="blr_red_gainsboro_search">    <form expr:action="/search" method="get" id="blr_red_gainsboro_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_red_gainsboro_search_input" />        <input type="image" id="blr_red_gainsboro_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Green-White Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type="text/css">#blr_green_white_search {   background:rgba(0,0,0,0) url('http://4.bp.blogspot.com/-LqO4DVsg0wM/Un9kYjswx-I/AAAAAAAAC50/akwotwS6934/s1600/white_image_2.png') scroll 50% 50% no-repeat;   width:330px;   height:50px;   display:block;}#blr_green_white_search_box {   display:block;   padding:6px 5px;   margin:0;}#blr_green_white_search_input {   padding:11px;   margin:0;   width:238px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_green_white_search_submit {   margin:0;   margin-left:5px;   padding:0;   height:38px;   width:51px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>
<div id="blr_green_white_search">    <form expr:action="/search" method="get" id="blr_green_white_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_green_white_search_input" />        <input type="image" id="blr_green_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Blue-White Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style type="text/css">#blr_blue_white_search {   background:rgb(255,255,255);   width:320px;   height:32px;   display:block;   border-radius:16px;   box-shadow:inset 0 0 8px rgba(0,0,0,0.4);}#blr_blue_white_search_box {   display:block;   padding:4px;   margin:0;}#blr_blue_white_search_input {   padding:4px 2px 4px 10px;   margin:0;   width:284px;   font:italic normal 10pt Georgia;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_blue_white_search_submit {   margin:0;   padding:0;   height:24px;   width:24px;   vertical-align:top;   border:none;   outline:none;   background:#009cff url('http://2.bp.blogspot.com/-qLAfz9vaSNA/Un9kWT4FtrI/AAAAAAAAC5Y/V5bs4zm6gME/s1600/search_small.png') scroll 50% 50% no-repeat;   border-radius:50%;}</style>
<div id="blr_blue_white_search">    <form expr:action="/search" method="get" id="blr_blue_white_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_blue_white_search_input" />        <input type="image" id="blr_blue_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Gray Search Box
tips4tricx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style type="text/css">#blr_gray_search {   background:rgba(0,0,0,0) url('http://1.bp.blogspot.com/-vtV24P8bg1c/Un9kVsRjefI/AAAAAAAAC5A/HrAWOA2nT2A/s1600/grew_image.png') scroll 50% 50% no-repeat;   width:307px;   height:50px;   display:block;}#blr_gray_search_box {   display:block;   padding:12px;   margin:0;}#blr_gray_search_input {   padding:6px 6px 6px 26px;   margin:0;   width:213px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_gray_search_submit {   margin:0;   margin-left:2px;   padding:0;   height:30px;   width:30px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>
<div id="blr_gray_search">    <form expr:action="/search" method="get" id="blr_gray_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_gray_search_input" />        <input type="image" id="blr_gray_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Red-White Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">#blr_red_white_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-MsGmbEaYMls/Un9kWJmUUnI/AAAAAAAAC5Q/T41emO-zrL8/s1600/red_image.png') scroll 50% 50% no-repeat;   width:307px;   height:50px;   display:block;}#blr_red_white_search_box {   display:block;   padding:10px 12px;   margin:0;}#blr_red_white_search_input{   padding:6px;   margin:0;   width:233px;   font-size:14px;   vertical-align:top;   background:rgba(0,0,0,0);   border:none;   outline:none;}#blr_red_white_search_submit {   margin:0;   margin-left:2px;   padding:0;   height:30px;   width:30px;   border:none;   background:rgba(0,0,0,0);   outline:none;}</style>
<div id="blr_red_white_search">    <form expr:action="/search" method="get" id="blr_red_white_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_red_white_search_input" />        <input type="image" id="blr_red_white_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Torn Page Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">#blr_torn_page_search {   background:rgba(0,0,0,0) url('http://2.bp.blogspot.com/-WOtFhkqSuwM/Un9kXYdUhGI/AAAAAAAAC5k/P2F5OeupizU/s1600/torn_page_image.png') scroll 50% 50% no-repeat;   width:340px;   height:58px;   display:block;}#blr_torn_page_search_box {   display:block;   padding:14px;   margin:0;}#blr_torn_page_search_input {   padding:6px;   margin:0;   width:266px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_torn_page_search_submit {   margin:0;   padding:0;   height:25px;   width:25px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>
<div id="blr_torn_page_search">    <form expr:action="/search" method="get" id="blr_torn_page_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_torn_page_search_input" />        <input type="image" id="blr_torn_page_search_submit" src="http://3.bp.blogspot.com/-voC7glqqSVQ/Un9kVT6yQTI/AAAAAAAAC48/vG6cGwnI1WE/s1600/blank.gif" />    </form></div>
Wooden Search Box


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">#blr_wooden_search {   background:rgba(0,0,0,0) url('http://4.bp.blogspot.com/-OS-PQU14y7A/Un9kY9oT1kI/AAAAAAAAC54/YfgcoQrmJig/s1600/wooden_image.png') scroll 50% 50% no-repeat;   width:326px;   height:45px;   display:block;}#blr_wooden_search_box {   display:block;   padding:4px;   margin:0;}#blr_wooden_search_input {   padding:11px;   margin:0;   width:248px;   font-size:14px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}#blr_wooden_search_submit {   margin:0;   padding:0;   height:38px;   width:44px;   vertical-align:top;   border:none;   outline:none;   background:rgba(0,0,0,0);}</style>
<div id="blr_wooden_search">    <form expr:action="/search" method="get" id="blr_wooden_search_box">        <input type="text" name="q" placeholder="Search this site..." id="blr_wooden_search_input" />        <input type="image" id="blr_wooden_search_submit"