Internet pe Thousands blogs/websites hain, Apne kavi socha ki apka blog ko baki blog se kitna alag hain?Konsi chiz apke blog ko baki blog mese unique banate hain? Design ek aisa chiz hain jo sabse phele user ke samne Apke website ka Uniqueness define karta hain Or Fir apka Content dekha jata hain. Ham Bloggers hamesha apne Blog ko Baki blog se unique bana ne me tule hue hain. Aise me kuch cohta sa changes apke blog ko Dusre blog se Unique bana sakte hain. Or is ke liye Ham apke liye 5 unique search box widgets leke aye hain Jo apke blog ko ek unique look deta hain Usike sath sath apke Impression vi increase kardeta hain. Search box as a Search tools website me use hota hain. Dekha jaye to ap Wese Blogger ka Defult search Box widgets use karsakte hain but Jab har koie isko hi use karega to Uniqueness kaha jayega ? Isliye dosto hamne 5 khub surat unique search box apke liye free me leke aye hain.
 |
| 5 Unique Custom Blogspot search box widgets |
Benefits of using search box widgets in Blog
Add Unique Custom Blogspot search widgets to Blogger
Widgets No.1
[html]<style type=”text/css”>
<!– Design by www.HindBlogger.in –>
#searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’); /* ie8 */
}
#searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
#searchform #searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 130px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}#searchform #searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9e9e9e’, endColorstr=’#454545′); /* ie8 */
}
</style>
<form id=”searchform” method=”get” action=”/search”>
<input id=”searchfield” name=”q” type=”text” placeholder=”Type here…” onfocus=”if (this.value == ‘Search…’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search…’;}”/>
<input id=”searchbutton” type=”submit” value=”Search” /></form>[/html]
Widgets No.2
[html]<style>
<!– Design by www.HindBlogger.in –>
#search-form {
background: #e1e1e1;
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: 150px;
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: 10px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 60px;
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 id=”search-form” method=”get” action=”/search”>
<input name=”q” type=”text” />
<input type=”submit” value=”Search” />
</form>[/html]
Widgets No.3
[html]<style>
<!– Design by www.HindBlogger.in –>
.form-container {
height: 49px;
padding: 0;
overflow: hidden;
text-align: left;
background: #f8f8f8;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
}
.search-field {
float: left;
width: 190px;
height: 34px;
margin: 6px 0 0 8px;
padding: 0 8px;
font-family: ‘Open Sans’, Arial, sans-serif;
font-size: 16px;
color: #888;
font-style: italic;
font-weight: 400;
background: #fff;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ffffff));
background-image: -webkit-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -moz-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -ms-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -o-linear-gradient(top, #f5f5f5, #ffffff);
background-image: linear-gradient(top, #f5f5f5, #ffffff);
-moz-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
}
.search-field:focus {
outline: 0;
color: #666;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #dadada inset;
-webkit-box-shadow: 0 1px 1px #dadada inset;
box-shadow: 0 1px 1px #dadada inset;
}
.submit-container {
float: left;
width: 50px;
height: 32px;
margin: 7px 0 0 7px;
padding: 0;
cursor: pointer;
background: #e63c0d;
border: 1px solid #d62700;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f55f15), to(#e63c0d));
background-image: -webkit-linear-gradient(top, #f55f15, #e63c0d);
background-image: -moz-linear-gradient(top, #f55f15, #e63c0d);
background-image: -ms-linear-gradient(top, #f55f15, #e63c0d);
background-image: -o-linear-gradient(top, #f55f15, #e63c0d);
background-image: linear-gradient(top, #f55f15, #e63c0d);
-moz-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
}
.submit-container:hover, .submit-container:focus {
background-image: -webkit-gradient(linear, left top, left bottom, from(#e63c0d), to(#f55f15));
background-image: -webkit-linear-gradient(top, #e63c0d, #f55f15);
background-image: -moz-linear-gradient(top, #e63c0d, #f55f15);
background-image: -ms-linear-gradient(top, #e63c0d, #f55f15);
background-image: -o-linear-gradient(top, #e63c0d, #f55f15);
background-image: linear-gradient(top, #e63c0d, #f55f15);
-moz-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
}
.submit-container:active {outline: 0;-moz-box-shadow: 0 1px 6px #e4340b inset;-webkit-box-shadow: 0 1px 6px #e4340b inset;box-shadow: 0 1px 6px #e4340b inset;}.submit {float: left;width: 60px;height: 32px;margin: 0;padding: 0;cursor: pointer;border: 0px solid #000;background: url(https://3.bp.blogspot.com/-zLPNKOT3mPw/WH2_U29KH5I/AAAAAAAAAGo/DKYLnpAKtV8NdtjUaFnill_ytfCVzEgNACLcB/s1600/magnifier.png) 20px 6px no-repeat;-moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px;}</style>
<div id=”search-form”><form class=”form-container” method=”get” action=”/search”>
<input type=”text” name=”q” class=”search-field” placeholder=”Type search text here…” />
<div class=”submit-container”><input type=”submit” value=”” class=”submit” />
</div></form></div>[/html]
Widgets No.4
[html]<style>
<!–Design by www.HindBlogger.in –>
#search {
-webkit-appearance: none;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
width: 24px;
padding: 0 10px;
height: 24px;
font-size: 14px;
color: #666;
line-height: 24px;
border: 0;
border-radius: 50px;
box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
position: relative;
z-index: 5;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
}
#search:focus {
outline: none;
width: 180px;
}
p.s {
z-index: 4;
position: relative;
padding: 5px;
line-height: 0;
border-radius: 100px;
background: #b9ecfe;
background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
display: inline-block;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}
p.s:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}
p.s:after {
content: ”;
display: block;
position: absolute;
width: 5px;
height: 20px;
background: #b9ecfe;
bottom: -10px;
right: -3px;
border-radius: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}
p.s:hover:after {
box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}
</style>
<form method=”get” action=”/search”>
<p class=”s”><input name=”q” id=”search” type=”text”></p>
</form>[/html]
Widgets No.5
[html]<style>
<!– Design by www.HindBlogger.in –>
@import url(https://fonts.googleapis.com/css?family=Montserrat+Alternates);
.field {
display:flex;
position:realtive;
margin:5em auto;
flex-direction:row;
box-shadow:
1px 1px 0 rgb(22, 160, 133),
2px 2px 0 rgb(22, 160, 133),
3px 3px 0 rgb(22, 160, 133),
4px 4px 0 rgb(22, 160, 133),
5px 5px 0 rgb(22, 160, 133),
6px 6px 0 rgb(22, 160, 133),
7px 7px 0 rgb(22, 160, 133)
;
}
.field>input[type=text],
.field>button {
display:block;
font:1.2em ‘Montserrat Alternates’;
}
.field>input[type=text] {
flex:1;
padding:0.6em;
border:0.2em solid rgb(26, 188, 156);
}
.field>button {
padding:0.6em 0.8em;
background-color:rgb(26, 188, 156);
color:white;
border:none;
}
</style>
<form method=”get” action=”/search”>
<div class=”field”>
<input type=”text” name=”q” id=”searchterm” placeholder=”what are you searching for?” />
<button type=”button” id=”search”>Find!</button>
</div>
</form>
<script class=”cssdeck” src=”//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js”></script>[/html]
How to add Custom search box widgets to Blogspot blog
