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/AVvXsEj0Q5feS7pA0kWZW4ia2CPcAZtw8vRgfPmvsK8Nl62apSucVA4rDhGNKh_ggYgq6Pd3iegUlSjTtG6vjyZEdaRO2ySPnhOxYAC42cOMGq7_wj44tqtH0U2_0r42XuwncNaVF0OjXyf0qNs/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/AVvXsEgd233Stmc2N2b6SlLjWPAMmV3uZNJf7K3b6RVgtHZcp1nGdkUCT5pwLkKT1ud9rYpfmtVuITae3M7W82QN6FoHWnWZNqfwlvfW7BNeAwaBBIDNbcv-NvUUagENE0aSFsoGb1sVBN7JmgI/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/AVvXsEjiBeA1y_hBhUVVD8_CtAiSrEQypfRGS_0bwITygSvQGHzkFZzaZPF7QaO8f47HjnjlZutHWGiRreU-bwQ6fkhU5aaVNUBLzgLclJ-ytIi_dva4zv91gJMlsFt0yuTmVFAzEPiKQ1Q_YgU/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/AVvXsEgrsyy9LIzId4OZV2DaGwYvrjKZYC1j3nlmRr89vX1LQ0uJGrs16LxOIxnaz-hOZK0ktrASI92CjprVjKmADrAJLMmmBowBKT5FWHn2AA2HaK3MdzR6sof8EFuzrqOTF5o4ODFWxzKmINI/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/AVvXsEhq-UVwaG4U59I_Bw740OUjXbAb0xN8kKinYyqqH3yqZ_JXw0WMW-4GmLPsBUZzG8OO9Llfe20Qt15wm9Nttr84zf_84_zGIQa52nNRf4fZDCz-OTaCIfGD4IY4UWwQRESTJ3kA_HifJtg/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
