and
Here are some fresh new search boxes for blogger and it's also easy to add these boxes.
- Go To Blogger > Template > Edit HTML
- Search for ]]></b:skin> and just above it paste following css:
/*-----Search One Starts-----*/
input{
font-family: cursive;
}
form.search1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmtH2FkvRApggkJmeWgUUjbaHEc-RVIWQAMORUXglUGHAEkMRyOUVnrVjGI60aNBfS-v9zYcthAF4oO-Y3ds0S6GagAhsIKIez77n-7L3krGoglVRxcvBw7JfDevNcbIatKKf737_r2I/s1600/1.png);
width: 320px;
height: 38px;
}
.text1 {
background: transparent;
width: 275px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit1 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 41px;
top: -12;
cursor: pointer;
}
/*-----Search One Ends-----*/
/*-----Search Two Starts-----*/
form.search2 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-_OxHgiulBtaf2CAiFAdOqrzGyU61FyFg3n4GWY4SN1oMkE9saAelnCIceSi58SNPnYddJGgVlFV6eoqGIAW3G9dRM2TP22yVI6trHLCf0YG0y147crgU2hWUlHmrgSwGZyKbf7X0Uo/s1600/2.png);
width: 320px;
height: 38px;
}
.text2 {
background: transparent;
width: 270px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit2 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 45px;
top: -12;
cursor: pointer;
}
/*-----Search Two Ends-----*/
/*-----Search Three Starts-----*/
form.search3 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwu18GVDIk7PnWgUhiDKfYE_UTkCWCHaTpxXAHYMoF0zxfpk_E3BCyb_eCLAUZckuI2oM9NBwUr2i5G6PKE6AWf9NGU54SYaZDYYZEzeH55gmxEebtAYtMQvL_89iQykbapWGSvMTOG4/s1600/3.png);
width: 320px;
height: 38px;
}
.text3 {
background: transparent;
width: 260px;
height: 38px;
border: 0px;
outline: 0px;
padding: 5px;
font-size: 20px;
}
.submit3 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 50px;
top: -12;
cursor: pointer;
left: 5px;
}
/*-----Search Three Ends-----*/
/*-----Search Four Starts-----*/
form.search4 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMUNI1hd1NoRbjQ4cfTGnvgvmqgDOjKFB_11o5HLgSZCaRpP8FdaE-YJ51D0-6cL_qt5TGRvzCQLGWNoR5wEQLaay9U8BDbEvWrKZ-nv6-BadaUR0f99e9Nd4GmabePuEUv_7Ip0s2mbc/s1600/4.png);
width: 334px;
height: 49px;
}
.text4 {
background: transparent;
width: 290px;
height: 38px;
border: 0px;
outline: 0px;
padding: 10px 0 0 10px;
font-size: 20px;
}
.submit4 {
background: transparent;
border: 0px;
height: 38px;
position: relative;
width: 40px;
top: -12;
cursor: pointer;
}
/*-----Search Four Ends-----*/
/*-----Search Five Starts-----*/
form.search5 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLj4yYL_p-ysaBtTI_rfH9VbdSjpAXbOYG2s0hgG5ohxUo0dhbVO50XzUJUUXXR1p1HVcQPXa0-dAFCCrnZVfchAcUjJoUPgdw6AyO4Bt51qLNyQsXhhi9Tk2zw5fBqeXvgTbQn8fWBM/s1600/5.png);
width: 320px;
height: 32px;
}
.text5 {
background: transparent;
width: 290px;
height: 32px;
border: 0px;
outline: 0px;
padding: 10px;
font-size: 15px;
border-radius: 18px 0 0 20px;
-webkit-border-radius: 18px 0 0 20px;
-moz-border-radius: 18px 0 0 20px;
-o-border-radius: 18px 0 0 20px;
}
.submit5 {
background: transparent;
border: 0px;
height: 23px;
position: relative;
width: 25px;
top: -5px;
left: -3px;
cursor: pointer;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
}
- Go To Blogger > Layout > Add A Widget > HTML/JavaScript > And paste following code:
HTML WIDGET Code :
<form class="search1" action="/search" style="method="get">
<input class="text1" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>
Now replace search1, text1 and submit1 one with your preferred search box. For example if you want 3rd search box then make this code like this:
<form class="search2" action="/search" style="method="get">
<input class="text2" type="text" name="q" value="Search Here" onclick="value=''" />
<input class="submit1" type="submit" value="" />
</form>
End.
Credits : widget created by : css box
FOLLOW US ON
No comments:
Post a Comment