Stylish colored Search boxes for blogger

Hey, guys here BlogTariff come back with another wonderful item called "BTF Search boxes" in different styles and colors.
Just Spicing up your blogger blogs with attractive flavored colors in latest style search boxes to add.
In Few blogger templates you won't find default Search boxes.
No need work hard just adding some code to your blog with simple method, below BlogTariff presents 5 types of "BTF Search boxes" for blogger blogs.

How to add BTF Search boxes to blogger

Sign into your blogge account
Click on "Design - (" Layout " in New interface blogger)" Page elements"
Click on "Add a Gadget" select "HTML/Javascript" and paste the below code and Save the widget.

BTF-Black Search box:

<style type="text/css">
#btf-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk3N4BXFwTWmLwNS7lJNJWyqC4iZazN1maLENJcFwl1wR7AZbpIiktpilBLwJLAa4BvHJdb6NAW4QafkytcsOB7k9GP_QTojkMBnW1b-iz50VxLIrZVIT958Hr6FAFBRhCMzqW2dWbJ-aB/s380/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#btf-searchform{display: block;padding: 10px 12px;margin:0;}
form#btf-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#btf-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="btf-searchbox">
<form id="btf-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.blogtariff.com/" target="_blank"> Search box</a></span>

</form>
</div>

BTF-White Search box:

<style type="text/css">
#btf-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1m0TtF7gNXw5Bqif8S45Ae4plCJZPExWvKNM-AspBUk1AQcBkV0m9kFadhQ6_GUfHbiWV3i0jJ4JtvkSGtgFYKZDon6HIRSDRQtB9dhJMxuriiVukF69yhZiNhleqB7dkErwMtdb3NLn-/s380/white-by-blogtariff.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#btf-searchform{display: block;padding: 10px 12px;margin:0;}
form#btf-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#btf-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="btf-searchbox">

<form id="btf-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.blogtariff.com/" target="_blank"> Search box</a></span>

</form>
</div>

BTF-Blue Search box:

<style type="text/css">
#btf-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBkoV5dbZT-xFHvXsA0Og7NDazYgvWwsJ2ca7ijP_jox6QWl4II8YqQgbBMfrFLBTM4fqnxDLBS6h_EAMJyd_21MScy46pnPvya-Qh7YDIGjDtvpeTl1tdK2OaaGiNiiBsfGWTmaQbKu33/s380/btf-blue-blogtariff.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#btf-searchform{display: block;padding: 10px 12px;margin:0;}
form#btf-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#btf-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="btf-searchbox">
<form id="btf-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.blogtariff.com/" target="_blank"> Search box</a></span>

</form>
</div>

BTF-Transparent Search box:

<style type="text/css">
#btf-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgkrbzYDRKrACRA2M06mezOwAbWnQgYyg2SrWk_BDFzb4fnQFJJ-0q0JuWdJeIHuALeu9WAPQqhNAsxAwGxoXyWhsWWPQHhEhNRE09SMf7E8hQouPdw0tLmuQJxcoleTxz5KQKMTaBL4Z/s380/btf-transparent-blogtariffcom.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#btf-searchform{display: block;padding: 10px 12px;margin:0;}
form#btf-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#btf-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="btf-searchbox">

<form id="btf-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.blogtariff.com/" target="_blank"> Search box</a></span>

</form>
</div>

BTF-Pink Search box:

<style type="text/css">
#btf-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGg0bZCRPFkk-__nloQqWLbU6p0FuraWQdn3b82LyRyYMa9jShbaukZv-tl3oLapWUXfq1-PcMg9-11Kw601SmGZvVaoGUo8J2u4nqXL-s5RKNTEfpVmI2tBWABVNvM77FnmhltgOhPrP6/s380/btf-pink-blogtariff.com.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#btf-searchform{display: block;padding: 10px 12px;margin:0;}
form#btf-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#btf-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="btf-searchbox">

<form id="btf-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.blogtariff.com/" target="_blank"> Search box</a></span>

</form>
</div>

Credits

All the above codes and styles are exclusively by BlogTariff in association with Omlitech.

Acknowledgement

If you enjoyed this articles then we respect your views to share on this blog. 

If you want to share this post with your readers and friends just subscribe and Link back to us.

Don't miss to visit again all the updates are waiting for you in next tutorials.