10 Stylish Custom Search Box को Blog में कैसे Add करे - NewFeatureBlog

10 Stylish Custom Search Box को Blog में कैसे Add करे




क्या आपने अपने blog या site पर search box को लगाया है ? अगर नहीं लगाया है तो तुरंत लगा ले क्योंकि अगर यह बॉक्स आपके blog पर नहीं यह तो समझ लीजिये की आप अपने ब्लॉग के बहुत सारे pageview को lose कर रहे है | मान लेते है अगर कोई visitor हमारे ब्लॉग पर आता है और वह अपने पसंद का कुछ जरुरी post को पढ़ना चाहता है और यदि हमारे site पर लगभग 300-400 पोस्ट है  या फिर इससे अधिक है तो इतने सारे पोस्ट में से वे अपना पसंद का पोस्ट कैसे ढूढेंगे |

ऐसे condition में search box हमारे blog पर आने वाले visitor की मदद कर सकता है | कोई भी visitor search box में लिखकर अपने पसंद का पोस्ट हमारे blog/site से search कर सकता है | इससे हमारे blog का pageview increase होता है और visitor को अपने जरुरत का post खोजने में आसानी होती है |

add-10-stylish-custom-search-box-in-blog

BlogSpot blog में search box gadget का feature पहले से होता है | बस आपको इस gadget को अपने ब्लॉग में add करना है | इसके लिए आपको Layout >> Add a Gadget >> Search Box के option में जाना है | परंतु यह widget बहुत ही simple होता है | इसलिए मैं आपको इस post 10 stylish custom search box को blog/site में add करने के लिए बतलाऊंगा | इसके लिए बस आपको इसके code को HTML/JavaScript में add करना है |






10 Stylish Custom Search Box Code



1. First

black-colour-stylish-seasrch-box

<style type=”text/css”>
#searchbox{
width:240px
}
#searchbox input{
outline:none
}
input:focus::-webkit-input-placeholder{
color:transparent
}
input:focus:-moz-placeholder{
color:transparent
}
input:focus::-moz-placeholder{
color:transparent
}
#searchbox input[type=”text”]{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUmn-w0soYGgzLqmvVuDzrR90i1-b9yj1EK2BB_NBBZEDnCP_SK0J2719zB41uQrbXQFstZC1GDrdla3BRJ7LO1T8G2XUwen1k_3ziCDJNvJf6gwsiIrjshdbNC-YSTrAxRbqLX0cPjHcg/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border:2px solid #f2f2f2;
font:bold 12px Arial,Helvetica,Sans-serif;
color:#6A6F75;
width:160px;
padding:14px 17px 12px 30px;
-webkit-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
text-shadow:0 2px 3px #fff;
-webkit-transition:all 0.7s ease 0s;
-moz-transition:all 0.7s ease 0s;
-o-transition:all 0.7s ease 0s;
transition:all 0.7s ease 0s;
}
#searchbox input[type=”text”]:focus{
background:#f7f7f7;
border:2px solid #f7f7f7;
width:200px;
padding-left:10px
}
#button-submit{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6oAC8CdLZOF-YOkTuDDXCRtbez44jVf0C6LlbamleP3Nse59OT4orbypGnglX7w3_5kNInUnZ2HMMXc_kbO3nKgSz_P7isgzCytQvZ-RAbBNTlhXkYzNNtLR2zJKRaK17-mWNmvtX_E_5/s1600/slider-arrow-right.png) no-repeat;
margin-left:-40px;
border-width:0;
width:43px;
height:45px
}
</style>
<form id=”searchbox”
method=”get”
action=”/search”
autocomplete=”off”>
<input name=”q”
type=”text”
size=”15″
placeholder=”Enter keywords here…” />
<input id=”button-submit”
type=”submit”
value=” “/>
</form>

2. Second

black-search-box

<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. Third

green-colour-seasrch-for-blog

<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. Fourth

blue-search-bar
<div id=”_bcd_141013″ style=”display:none”></div>
<style type=”text/css”>
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;

border: /*border-width-s*/2px solid;/*border-width-e*/
border-color: /*border-color-s*/#dd;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#E6E6FA;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
background: transparent;

color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
border: none;
min-width: 2em;

color: /*submit-text-color-s*/#ADFF2F;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#4B0082;/*submit-bg-color-e*/
}
html[dir=”rtl”] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action=’/search’ id=’_bcd_141013_search_form’ method=’get’>
<input id=’_bcd_141013_search_text’ name=’q’ placeholder=”Search post….” data-placeholder-end=”” type=’text’/>
<button type=”submit” id=”_bcd_141013_search_submit”><i class=”fa fa-search”></i></button><!–endofsearsubmit–>
</form>

<script type=”text/javascript”>
/*
Author: Himanshu Kumar
Site: http://www.newfeatureblog.com/
*/
var ss = document.getElementsByTagName(‘link’);
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute(‘href’);
if (href && href != null && href.indexOf(“font-awesome/”) != -1) {
        break;
}
}
if (i >= ss.length) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.href = “http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css”;
}
document.getElementsByTagName(“head”)[0].appendChild(link);

</script>

5. Fifth

blue-with-yellow-search-button

<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>

6. Sixth

simple-red-search
<div id=”_bcd_141013″ style=”display:none”></div>
<style type=”text/css”>
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;

border: /*border-width-s*/1px solid;/*border-width-e*/
border-color: /*border-color-s*/#dddddd;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#ffffff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
background: transparent;

color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
border: none;
min-width: 2em;

color: /*submit-text-color-s*/#ffffff;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#ff0000;/*submit-bg-color-e*/
}
html[dir=”rtl”] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action=’/search’ id=’_bcd_141013_search_form’ method=’get’>
<input id=’_bcd_141013_search_text’ name=’q’ placeholder=”Search post….” data-placeholder-end=”” type=’text’/>
<button type=”submit” id=”_bcd_141013_search_submit”><i class=”fa fa-search”></i></button><!–endofsearsubmit–>
</form>

<script type=”text/javascript”>
/*
Author: Himanshu Kumar
Site: http://www.newfeatureblog.com/
*/
var ss = document.getElementsByTagName(‘link’);
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute(‘href’);
if (href && href != null && href.indexOf(“font-awesome/”) != -1) {
        break;
}
}
if (i >= ss.length) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.href = “http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css”;
}
document.getElementsByTagName(“head”)[0].appendChild(link);

</script>

7. Seventh

black-with-red-search-button
<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>

8. Eighth

pink-search-box
<div id=”_bcd_141013″ style=”display:none”></div>
<style type=”text/css”>
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;

border: /*border-width-s*/4px solid;/*border-width-e*/
border-color: /*border-color-s*/#800000;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
background-color: /*bg-color-s*/#fff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
background: transparent;

color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
border: none;
min-width: 2em;

color: /*submit-text-color-s*/#FA8072;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#C71585;/*submit-bg-color-e*/
}
html[dir=”rtl”] button#_bcd_141013_search_submit {
right: auto;
left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action=’/search’ id=’_bcd_141013_search_form’ method=’get’>
<input id=’_bcd_141013_search_text’ name=’q’ placeholder=”Search post….” data-placeholder-end=”” type=’text’/>
<button type=”submit” id=”_bcd_141013_search_submit”><i class=”fa fa-search”></i></button><!–endofsearsubmit–>
</form>

<script type=”text/javascript”>
/*
Author: Himanshu Kumar
Site: http://www.newfeatureblog.com/
*/
var ss = document.getElementsByTagName(‘link’);
for (var i = 0; i < ss.length; i++) {
var href = ss[i].getAttribute(‘href’);
if (href && href != null && href.indexOf(“font-awesome/”) != -1) {
        break;
}
}
if (i >= ss.length) {
var link = document.createElement(“link”);
link.rel = “stylesheet”;
link.href = “http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css”;
}
document.getElementsByTagName(“head”)[0].appendChild(link);

</script>

9. Nineth

red-colour-stylish-search-box

<style type= “text/css” >
#nbc-searchbox { background: url
( http :// 3 .bp.blogspot.com/-DqQKomzx 0 pw/Ue 7 BlSCh 3 zI/AAAAAAAAAiA/U 3 c 87 KbsBQc/s 1600 /noxdo_blogspot_com_Search-icon 6 .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. Tenth

black-stylish-search-bar
<style type= “text/css” >
#nbc-searchbox { background: url
( http :// 1 .bp.blogspot.com/-NN 0 X 9 atWQVA/Ue 7 BSA-RMFI/AAAAAAAAAh 0 /hlsMUg 1 hQko/s 1600 /noxdo_blogspot_com_Search-icon 5 .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>

10 Stylish Custom Search Box को Blog में कैसे Add करे ?

Search Box को ब्लॉग में add करने के लिए निम्न steps को follow करे :

Step 1

सबसे पहले अपने blogger account में login करे |

Step 2

  1. Layout option पर click करे |
  2. Blog में जिस स्थान पर search box को लगाना चाहते है, उस स्थान के Add a Gadget link पर click करे |

click-on-layout-add-a-gadget

Step 3

HTML/JavaScript पर click करे |

click-on-html-javascript

Step 4

  1. अपने हिसाब से जो title लिखना है लिखे जैसे कि ‘Search this blog’ etc.
  2. जिस search box को आप लगाना चाहते है, उसके code को copy करके content box में paste कर दे |
  3. Lastly, Save पर click करे |

paste-code-in-content-box-and-save

बस हो गया अब search box आपके blog में add हो चूका है | आप अपने blog को check करके देख सकते है |



उम्मीद है कि आपको यह पोस्ट पसंद आया होगा | इन stylish custom search box को blog में add करने में कोई problem आती है तो मुझे comment करे |





इसी तरह का पोस्ट पढ़ते रहने के लिए मुझे subscribe करे | अगर यह पोस्ट पसंद आया हो तो इसे social sites पर share करे |

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *