Bloger Blog Pe Seach Box Kaise Add Kare

Bloger pe search box kyu lagate hain

jab koi hamare website pe aata hai to use sari post to ek sath nahi dikh pati wo visitors sochta hai kash koi aisi jagah milti jaha pe hum uska name enter kare aur o mere khud mil jaye
usi liye bina time gwaye kuch hi secondo me sare post search kar ke padh saktey hain
aur apne website ka look bhi behter bna saktey hain

Search Box Kaise Add Kare Bloger me

         Login >Blogger
          Dashboard>>Layout>>Add
         Gadget>htmL/Javascrp



               Search Box Code

1. <style>
#nbc-searchsimplebox1
{
padding :10px ;
}
#nbc-searchsimplesubmit1
{
border: 1px solid orange;
background: orange ;
padding :5px ;
color:#ffffff ;
font:14px verdana;
}
#nbc-searchsimpleinput1
{
-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;
}
</style>
<div id= 'nbc-searchsimple1'>
<form
action= '/search/max-results=8'
method= 'get' id= "nbc-searchsimplebox1" >
<input
name='q' id= 'nbc-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= 'nbc-searchsimplesubmit1'
type='submit'
value='Search' />
</form>
</div>

2.<style>
#nbc-searchexpandbox1
{
padding :10px ;
}
#nbc-searchexpandsubmit1
{
border: 1px solid
#111111 ;
background: #111111 ;
padding :5px ;
color:#ffffff ;
font:14px verdana;
}
#nbc-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 ;
}
#nbc-searchexpandinput1:hover
{
width:200px ;
}
</style>
<div id= 'nbc-searchexpand1'>
<form
action= '/search/max-results=8'
method= 'get' id= "nbc-searchexpandbox1" >
<input
name='q' id= 'nbc-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= 'nbc-searchexpandsubmit1'
type='submit'
value='Search' />
</form>
</div> 

3.  <style>
#nbc-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 ;
}
#nbc-searchgreenbox1
{
padding :10px ;
}
#nbc-searchgreensubmit1
{
border: 1px solid green;
background: green ;
padding :5px ;
color:#ffffff ;
font:14px verdana;
}
#nbc-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= 'nbc-searchgreen1' >
<form
action= '/search/max-results=8'
method= 'get' id= "nbc-searchgreenbox1" >
<input
name='q' id= 'nbc-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= 'nbc-searchgreensubmit1'
type='submit'
value='Search' />
</form>
</div>

4.  <style>
#nbc-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 ;
}
#nbc-searchbluebox1
{
padding :10px ;
}
#nbc-searchbluesubmit1
{
border: 1px solid orange;
background: orange ;
padding :5px ;
color:#ffffff ;
font:14px verdana;
}
#nbc-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= 'nbc-searchblue1' >
<form
action= '/search/max-results=8'
method= 'get' id= "nbc-searchbluebox1" >
<input
name='q' 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= 'nbc-searchbluesubmit1'
type='submit'
value='Search' />
</form>
</div>

5. <style>
#nbc-searchblack1
{
background: #222222 ;
border-radius :10px ;
width:290px ;
}
#nbc-searchblackbox1
{
padding :10px ;
}
#nbc-searchblacksubmit1
{
border: 1px solid
#222222 ;
background: #dc4523 ;
padding :5px ;
color:#ffffff ;
font:14px verdana;
}
#nbc-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= 'nbc-searchblack1' >
<form
action= '/search/max-results=8'
method= 'get' id= "nbc-searchblackbox1" >
<input
name='q' id= 'nbc-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= 'nbc-searchblacksubmit1'
type='submit'
value='Search' />
</form>
</div>

6.  <style>
#MBBOldSearch {
display : block;
clear: both;
margin: 10px 0 ;
}
#MBBOldSearch
#MBBSinput {
background: url
(http:// 4 .bp.blogspot.com/-C 7mh 2 vX4 gp 4/Ue 6 -L3iTnXI/AAAAAAAAAhI/-K6xVaVoM 1 g/s 1600/noxdo_blogspot_com_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;
width: 52% ;
}
#MBBOldSearch
#MBBSsubmit {
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= "MBBOldSearch" >
<form action= "/search/max-results=8" >
<input
name="q"
id= "MBBSinput"
type="text" />
<input
value="Search"
id= "MBBSsubmit"
type="submit" />
</form>
</div>

8.  <style>
#search-form {
background: #e1e1e1 ; /* Fallback color for non-css3 browsers */
width: 365px ;
background: -webkit-
gradient( linear, left top, left bottom,
color-stop( 0, rgb
(243 , 243 ,243 )), color-stop(1, rgb
(225 , 225 ,225 )));
background: -moz-
linear-gradient ( center top, rgb (243 , 243 ,243 )
0%, rgb ( 225 ,225 ,225 )
100% );
border-radius : 17px ; -webkit- border-radius :
17px ; -moz- border-radius: 17px ;
box-shadow : 1px 1px
2px rgba( 0,0 ,0 ,.3 ), 0
0 2px rgba(0 ,0 ,0,. 3 );
-webkit- box-shadow :
1px 1px 2px rgba(0, 0, 0,. 3), 0 0 2px rgba(0, 0, 0,. 3);
-moz- box-shadow : 1px
1px 2px rgba(0, 0, 0,. 3), 0 0 2px rgba(0, 0, 0,. 3); }
input[type= "text" ]{
background: #fafafa ;
background: -webkit-
gradient( linear, left bottom, left top,
color-stop( 0, rgb
(250 , 250 ,250 )), color-stop(1, rgb
(230 , 230 ,230 )));
background: -moz-
linear-gradient ( center top, rgb (250 , 250 ,250 )
0%, rgb ( 230 ,230 ,230 )
100% );
border: 0 ; border-bottom: 1px solid #fff ;
border-right : 1px solid rgba(255 , 255 ,255 ,. 8 );
font-size: 16px ;
margin: 4px ; padding :
5px ; width: 250px ;
border-radius : 17px ; -webkit- border-radius :
17px ; -moz- border-radius: 17px ;
box-shadow : -1px - 1px
2px rgba( 0,0 ,0 ,.3 ), 0
0 1px rgba(0 ,0 ,0,. 2 );
-webkit- box-shadow :
-1px - 1px 2px rgba(0, 0, 0,. 3), 0 0 1px rgba(0, 0, 0,. 2);
-moz- box-shadow : -1px -1px 2px rgba(0, 0, 0,. 3), 0 0 1px rgba(0, 0, 0,. 2); }
input[type= "text" ]:focus
{outline : none;
background: #fff ;
background: -webkit-
gradient( linear, left bottom, left top,
color-stop( 0, rgb
(255 , 255 ,255 )), color-stop(1, rgb
(235 , 235 ,235 )));
background: -moz-
linear-gradient ( center top, rgb (255 , 255 ,255 )
0%, rgb ( 235 ,235 ,235 )
100% ); }
input[type= "submit" ]{
background: #44921f ;
background: -webkit-
gradient( linear, left top, left bottom,
color-stop( 0, rgb
(79 ,188 , 32 )), color-stop(0. 15 , rgb
(73 ,157 , 34 )), color-stop(0. 88 , rgb
(62 ,135 , 28 )), color-stop(1, rgb
(49 ,114 , 21 )));
background: -moz-
linear-gradient ( center top, rgb (79 ,188 ,32 )
0%, rgb ( 73 ,157 , 34)
15% , rgb (62 ,135 ,28 )
88% , rgb (49 ,114 ,21 )
100% );
border: 0 ; color :
#eee ; cursor : pointer ;
float: right; font:
16px Arial, Helvetica,
sans-serif; font-weight: bold; height :
30px ;
margin: 4px 4px 0 ;
text-shadow : 0 - 1px 0 rgba(0, 0, 0,. 3); width :
84px ; outline : none;
border-radius : 30px ; -webkit- border-radius :
30px ; -moz- border-radius: 30px ;
box-shadow : -1px - 1px
1px rgba(255 , 255 ,255 ,. 5 ), 1px
1px 0 rgba(0 ,0 ,0,. 4 );
-moz- box-shadow : -1px -1px 1px rgba(255 , 255 ,255 ,. 5 ), 1px
1px 0 rgba(0 ,0 ,0,. 2 );
-webkit- box-shadow :
-1px - 1px 1px rgba(255 , 255 ,255 ,. 5 ), 1px
1px 0 rgba(0 ,0 ,0,. 4 ); }
input
[type="submit" ]:hover {
background:
#4ea923 ; background : -webkit-gradient
( linear, left top,
left bottom, color-stop
(0, rgb ( 89 ,222 , 27)),
color-stop( 0. 15, rgb
(83 ,179 , 38 )), color-stop(0. 8, rgb
(66 ,143 , 27 )), color-stop(1, rgb
(54 ,120 , 22 )));
background: -moz-
linear-gradient ( center top, rgb (89 ,222 ,27 )
0%, rgb ( 83 ,179 , 38)
15% , rgb (66 ,143 ,27 )
80% , rgb (54 ,120 ,22 )
100% ); }
input
[type="submit" ]:active {
background:
#4ea923 ; background : -webkit-gradient
( linear, left bottom,
left top, color-stop
(0, rgb ( 89 ,222 , 27)),
color-stop( 0. 15, rgb
(83 ,179 , 38 )), color-stop(0. 8, rgb
(66 ,143 , 27 )), color-stop(1, rgb
(54 ,120 , 22 )));
background: -moz-
linear-gradient ( center bottom, rgb ( 89 ,222 , 27)
0%, rgb ( 83 ,179 , 38)
15% , rgb (66 ,143 ,27 )
80% , rgb (54 ,120 ,22 )
100% ); }
</style>
<form action= "/search/max-results=8"
id= "searchbox" >
<input name="cx"
type="hidden"
value="X:Y" />
<input name="cof"
type="hidden"
value="FORID:11" />
<input id= "q" name="q"
size="70" type="text" />
<input name="sa"
type="submit"
value="Search" />
</form>

9.  <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMg6Onalf5oePtga4MA5srQDldgqKFSd9oZo-qOAAq16tEcV6Rnv7YVvV6DPQ3qvJmxTEy9_bzh8T-wG31RXg-JEc2xNhaJLOVFkpR3GOA-aavfYEz2pkwtcju2sXnbbz6oov4F0sGWQ/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>

10.   <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgYNOnEJep2pPUhYcY68DrwIzNNKGF2HBwZ4M5KtvOcLotNgQChNMi_H1Q1vKjIX_6-ih_O83FfQVQzzGoZGkTjhZL7omGhhXdX_bT4esDeSVeMKM32GJP0SHC8vx7RNklzaCJUaTL6o/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>

11.   <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_NSE4ndg-X3ktvHf-6RbCgSVlw8xlW_khERPS_vi5ho6pgnjxOWeF7U4ID6Mf4owB8_tO-yodxJGV0xGR0yGpzjb-NFMTArwAMn6Dmy1PYQ9aP4E4R-RUTcBtPnSU4sZIgdq-xGKfH0/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>

12.   <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrspuzcNStGfhOsd93qD0BMHnqKNToG-BB9VhOx2p2sxnv_8ChT4MqEEF7RdzFvemkZ1cI7PwNkjoTgdQXHSiZi_7iMV_6XQDXg9-BGNKzeqxR4H9FRiBSwZWhM5cFNrMTQEsxnwi80E/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>


Note Agar Aapko Code Add Karne Me Koi Dikat Aa Rahi Hai To Aap Hume Coment Kare  
aapko ye mera blloger post kaisi lagi aap hume co0ment kar ke jarur bataye