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
Search box
serf apke website ka design ko nehi balki wo uske jariye apke site visitors ko
site ko browse karna or jyada asan ho jayega.Jo visitors
apke site Regular visit karte hain wo agar kisi din kisi purana post ko search
karne jaye to Ek search box unkeliye bohat kam ka hosakta hain or aise apka
Visitors vi satisfied hota hain.
Add Unique Custom Blogspot search widgets to Blogger
Agar ap apne Blog me search widgets add karna chate hain or apko design karna nehi ata hain to ap niche digaye 5 unique search widgets me se use karsakte hain.
Widgets No.1
Code for the Widgets
<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>
Widgets No.2
Code for the Widgets
<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>
Widgets No.3
Code for the Widgets
<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>
Widgets No.4
Code for the Widgets
<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>
Widgets No.5
Code for the Widgets
<style>
<!-- Design by www.HindBlogger.in -->
@import url(http://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>
How to add Custom search box widgets to Blogspot blog
Step 1. Login to your blogger account Uske bad Layout me aye >> “Add a gadget” Link par click kare jaha pe is widgets ko add karna cha rahe hain.
Step 2. Ab apke samne ek popup box khul jaye ga inmese “Html/Java Script” par click kare
Step 3. Paste any Of thr above code. That’s it Guys easy na 😅.
Aur Padiye
Last Word
So a tha Kuch 5 unique search box widgets. Ap in sare widgets ko free use karsakte hain. Or sare code me HTML tag ke andar ek Credit diyagya hain Jisko ap edit nakare isse apke site ka koie nuksan nehi hoga or user dekhvi nehi payega. Umeed hain ki ap in widgets ko use kar parhe hain. Agar apke man koie vi doubt ya sawal hain to niche comment karke puch sakte hain.
Thanks for sharing such a nice article .... Really amazing post!! :) :)
ReplyDeleteThanks HindIndia...... :)
Delete