Blog me Responsive Search Box kaise lagate hai? (How to add Responsive search Box in Blog?)


Kya aap apne Blog me Responsive Search Box lagane ke baare me search kar rahe hai? to aap bilkul sahi blog par ho. Mai aapko yaha 7 Responsive and stylish Search Boxes ke baare me bataunga. Bas aapko jis Search Box ko apne blog me lagana chahte hai us ke code ko copy kar le. Search Box lagane ke liye Niche diye gaye code ko copy karke apne blog ke HTML me ]]></b:skin> code ko search karke niche diye gaye code ko ]]></b:skin> is code ke just upar paste kar de.


Read- Blog me Facebook like page box kaise lagate hai?
Read- Blog ya Site me Breaking news ticker kaise lagate hai?
Read- Blog/Site ko posts me Ms Word ka Table kaise lagate hai?
Read- Blog ko Chori hone se kaise bachaye?

Search Box No. 1


Markup Code
<div class="search-wrapper"> <div class="input-holder"> <input type="text" class="search-input" placeholder="Type to search" /> <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button> </div> <span class="close" onclick="searchToggle(this, event);"></span> </div>

CSS Code
.search-wrapper .input-holder .search-input {
    width:100%;
    height: 50px;
    padding:0px 70px 0 20px;
    opacity: 0;
    position: absolute;
    top:0px;
    left:0px;
    background: transparent;
    box-sizing: border-box;
    border:none;
    outline:none;
    font-family:"Open Sans", Arial, Verdana;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color:#FFF;
    transform: translate(0, 60px);
    transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.3s;
}
.search-wrapper.active .input-holder .search-input {
    opacity: 1;
    transform: translate(0, 10px);
}
.search-wrapper .input-holder .search-icon {
    width:70px;
    height:70px;
    border:none;
    border-radius:6px;
    background: #FFF;
    padding:0px;
    outline:none;
    position: relative;
    z-index: 2;
    float:right;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.search-wrapper.active .input-holder .search-icon {
    width: 50px;
    height:50px;
    margin: 10px;
    border-radius: 30px;
}
.search-wrapper .input-holder .search-icon span {
    width:22px;
    height:22px;
    display: inline-block;
    vertical-align: middle;
    position:relative;
    transform: rotate(45deg);
    transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}
.search-wrapper.active .input-holder .search-icon span {
    transform: rotate(-45deg);
}
.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {
    position: absolute; 
    content:'';
}
.search-wrapper .input-holder .search-icon span::before {
    width: 4px;
    height: 11px;
    left: 9px;
    top: 18px;
    border-radius: 2px;
    background: #FE5F55;
}
.search-wrapper .input-holder .search-icon span::after {
    width: 14px;
    height: 14px;
    left: 0px;
    top: 0px;
    border-radius: 16px;
    border: 4px solid #FE5F55;
}
.search-wrapper .close {
    position: absolute;
    z-index: 1;
    top:24px;
    right:20px;
    width:25px;
    height:25px;
    cursor: pointer;
    transform: rotate(-180deg);
    transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);
    transition-delay: 0.2s;
}
.search-wrapper.active .close {
    right:-50px;
    transform: rotate(45deg);
    transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);
    transition-delay: 0.5s;
}
.search-wrapper .close::before, .search-wrapper .close::after {
    position:absolute;
    content:'';
    background: #FE5F55;
    border-radius: 2px;
}
.search-wrapper .close::before {
    width: 5px;
    height: 25px;
    left: 10px;
    top: 0px;
}
.search-wrapper .close::after {
    width: 25px;
    height: 5px;
    left: 0px;
    top: 10px;
}
Read- Blogger Blog posts me Code box kaise lagaye?
Read- Blog me Stylish and Beautiful newsletter signup form kaise lagate hai?
Read- Blog me Popup massage kaise install karte hai?
Read- Blogger blog me Google Font kaise install kare?

Search Nox No. 2


Markup Code
<div id="navigation-bar" class="clearfix">    

    <form id="search" action="#" method="post">

        <div id="label"><label for="search-terms" id="search-label">search</label></div>

        <div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>

    </form>

    <nav>

        <ul>

            <li><a href="#">Nav 1</a></li>

            <li><a href="#">Nav 2</a></li>

            <li><a href="#">Nav 3</a></li>

            <li><a href="#">Nav 4</a></li>

        </ul>

    </nav>

</div>

CSS Code


    #navigation-bar {


    position: relative;


    height: 60px;


    }


    #search {


    position: absolute;


    top: 0;


    left: 0;


    width: 60px;


    height: 60px;


    }


    #label {


    width: 60px;


    height: 60px;


    position: relative;


    z-index: 20;


    }


    #label label {


    display: block;


    width: 60px;


    height: 60px;


    background: url("../img/search.png") 0 0;


    font-size: 0;


    color: rgba(0, 0, 0, 0);


    text-indent: -9999px;


    cursor: pointer;


    }


    #label label:hover {


    background: url("../img/search.png") -60px 0


    }


    #label.active label {


    background: url("../img/search.png") -60px 0


    }


    #input {


    position: absolute;


    top: 0;


    left: 60px;


    width: 450px;


    height: 60px;


    z-index: 5;


    overflow: hidden;


    }


    #input input {


    display: block;


    position: absolute;


    top: 0;


    left: -450px;


    width: 450px;


    height: 100%;


    margin: 0;


    padding: 0 10px;


    border: none;


    background-color: #23688b;


    color: #fff;


    font-size: 18px;


    backface-visibility: none;


    border-radius: 0;


    transition: left 0;


    }


    #input input:focus {


    outline: none


    }


    #input.focus {


    z-index: 20


    }


    #input.focus input {


    left: 0;


    transition: left 0.3s;


    }


    nav {


    padding-left: 70px;


    position: relative;


    z-index: 10;


    }


    nav ul {


    list-style-type: none;


    margin: 0;


    padding: 0;


    }


    nav li {


    display: inline-block;


    height: 60px;


    line-height: 60px;


    font-size: 24px;


    font-family: "Oswald", sans-serif;


    font-weight: 300;


    text-transform: uppercase;


    }


    nav a {


    display: block;


    padding: 0 15px;


    color: #c8c8c8;


    }


    nav a:hover {


    color: #3296c8


    }
Read- Blog post ki images par Pinterest ka button kaise lagaye?
Read- Popup email subscribe box kaise lagate hai Blog me?

Search Nox No. 3


Markup Code
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>


CSS Code
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;

-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;

-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}

input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}

.sb-search-input:-moz-placeholder {
color: #efb480;
}

.sb-search-input::-moz-placeholder {
color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit  {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}

.sb-icon-search:before {
content: "\e000";
}

Search Box No. 4


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

CSS Code
<style type='text/css'>

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

Search Box No. 5


Markup Code
<div id="Exp-serach" class="Exp-serach">
<form>
<input class="ExpInput " onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
<input class="Expbtn" type="submit" value="">
<span class="ExpIcon"><i class="fa fa-search"></i></span>
</form>
</div>
Read- Blogger blog me related post widget kaise lagaye?
Read- Google Feed burner ID kaise banaye aur kaise Blog me Submit karte hai?


CSS Code
.Exp-serach {
position: relative;
margin-top: 20px;
width: 0%;
min-width: 50px;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.ExpInput {
background: #fff none repeat scroll 0 0;
border: medium none;
color: #A0B58D;
font-family: inherit;
font-size: 20px;
height: 50px;
margin: 0;
outline: medium none;
padding: 0 2%;
position: absolute;
right: 0;
top: 0;
width: 50%;
z-index: 10;
}
input[type="search"].ExpInput {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.ExpInput::-webkit-input-placeholder {
color: #efb480;
}
.ExpInput:-moz-placeholder {
color: #A0B58D;
}
.ExpInput::-moz-placeholder {
color: #A0B58D;
}
.ExpInput:-ms-input-placeholder {
color: #A0B58D;
}
.ExpIcon,
.Expbtn {
width: 50px;
height: 50px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.Expbtn {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
color:red;
border: none;
outline: none;
z-index: -1;
}
.ExpIcon {
color: #fff;
background: #A0B58D;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.ExpIcon:before {
content: "";
}
.Exp-serach.Exp-serach-open,
.no-js .Exp-serach {
width: 100%;
}
.Exp-serach.Exp-serach-open .ExpIcon,
.no-js .Exp-serach .ExpIcon {
background: #A0B58D;
color: #fff;
z-index: 11;
}
.Exp-serach.Exp-serach-open .Expbtn,
.no-js .Exp-serach .Expbtn {
/* z-index: 90;*/
}

Search Box No. 6


Markup Code
<div id="main">

<form id="searchForm" action="/search">

<fieldset>

<div class="input">

<input type="text" name="q" id="s" placeholder="Enter your search" />

</div>

<input type="submit" id="searchSubmit" value="" />

</fieldset>

</form>

</div>

CSS Code
<style type='text/css'>

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

vertical-align: baseline;

}

/*-------------

SEARCH

-------------*/

#searchForm fieldset {

width:240px;

position:relative;

display:block;

}

div.input {

width:120px;

padding:5px 15px 7px 15px;

border-radius:20px;

border:1px solid #c6d2db;

border-top:1px solid #b4c1cb;

box-shadow:inset 0 1px 2px rgba(0,0,0,0.08);

float:right;

background:#e8edf1;

}

div.input.focus {

border:1px solid #9ecbe2;

box-shadow:0 0 6px #abdcff, inset 0 1px 2px rgba(0,0,0,0.08);

}

input#s {

width:100%;

border:0;

border-radius:20px;

background:transparent;

height:16px;

color:#b4bdc4;

text-shadow:0 1px 1px #fff;

}

input#s:focus {

outline:none

}

input#searchSubmit {

width:19px;

height:19px;

text-indent:-9999px;

overflow:hidden;

background:url(../images/search-icon.png) no-repeat;

border:0;

position:absolute;

top:7px; right:13px;

z-index:5;

display:none;

cursor:pointer;

}

</style>

Search box ko lagane ke liye CSS Code ko apne blog ke ]]></b:skin>  Code ke just upar paste kar de aur isme se <style type-'text/css'  aur </style> codes ko remove kar de. Aur niche di gayi JQuery code ko apne blog ki html ke </head> Code ke just upar paste kar de. 

JQuery Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script src="http://pastebin.com/raw.php?i=J6Kpa2Pf"></script>

<script src="http://pastebin.com/raw.php?i=yu6FUA1L"></script>
code copy and paste karne ke baad me Markup Code ko aap apne blog me us jagah par laga de jis jagah par aapko apna Search Boc add karna hai aur fit baad me save theme par click kar de. 
Congratulation ab aapke Blog me Search Box add ho chuka hai. Agar koi problem ho to aap mujhe comment karke bataye.

Oh! Aapko ye Post pasand aayi!!!

Help To You Blog ki Latest posts ko apne email par paane ke liye aur Tech aur Blogging ki latest posts ko apne email par paane ke liye abhi Subscribe kare!!!

Previous
Next Post »