Cool Search Boxes for Blogger

I recently shared simple yet cool search boxes for blogger. Now its time for something new, cool, beautiful and sleek.

So here comes sleek and cool search boxes for blogger/blogspot. It’s using simple image and css, HTML. Actually these are PSD source designed by Design3edge. I work hard in converting this to Blogger for YOU. Hope you enjoyed with this!

Adding Add Cool Search Boxes For Blogger

1. Login to Blogger Dashboard   => Design tab  => Page Elements .
2. Click on Add a Gadget where you wish to place this Search Boxes.
3. Choose HTML/JavaScript from the List.
4. Place any one Search Box code in to it and Save the Gadget.

Style 1

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

<form id="abt-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" />
</form>
</div>

Style 2

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

<form id="abt-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" />
</form>
</div>

Style 3

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

<form id="abt-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" />
</form>
</div>

Style 4

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

<form id="abt-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" />
</form>
</div>

Style 5

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

<form id="abt-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" />
</form>
</div>