Add Sleek and Cool Search Boxes to Blogger

We recently shared simple yet cool search boxes widget 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. We work hard in converting this to Blogger for YOU. Hope you enjoyed with this!

 Update: For WordPress Version Click Here!

How To Add Cool Search Boxes To 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/AVvXsEhs6k-_oMmy_Bq0s8pFYPII2t4P_DJRliRWjegMQO7XjIF1Wp3_88bhCdW6q1DB6hxDrOTXw_A3EJ4q0YSbvpTNw8pqIGCjhZ0A-syfbxPORogok0bJH8Hc5oyOil626GRccCZiQxa4DnA/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/AVvXsEiXkL2QPdnpqMd0JvCBTqcPhp9yVgivkKRUcKl4ty4srOzl349QyL4gOu_1gBm5bUQ6R4tc4KsuUeo4awnhU5oYfmIQ3KV5rlrgC2G0Fzr_jgZ3tgS7hg2hCCuD00ClLc9rwNFZKebJq2c/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/AVvXsEh6y64UaBE_-1TTEmd6oVA4NAvBZjw8pcOXGHr4h3mdtBUEBaex6909WvhwiGkjOlItS-zAH4OZDb-x1EQT2nB9Z-pe6GMjTLo0zU5ffbPqvReEvur5puzLeae8qU2OOWipb1b5sTz5VDE/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/AVvXsEiUGYL0GEGIDG2_AD2kFvXRjIkhlUtS8LJEEqLURupYGb7wQr0Zvo70jLIlCnTwZFuseZGF3i0ktTvqp_xXyW64z3MQZxgraG_XY-z6kqWKIQ_yxaOXq7Rinx_DlFlkswN9QrEpLb2DKHI/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/AVvXsEg7-vKJTRJJGhjgPe1GTI2rWxUCJnMZMPQ92EKTKBOBz2_HUVyg31odmUVdNco4RbTxo9CvwJe8DaH_erVcn7P72zPzYAc91uzQYAeJK_xIlFhHbyNJmzHcXIjoRNNCOrIYzizR6RG2Jf4/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>

Credits

This is again a first time shared tutorial guide by AllBloggingTips. These scripts, widget and style sheets are provided only by ABT  therefore if you wish to share this tutorial with your readers and friends then kindly link back to this post as the only favour in return. 

That’s all!. We hope you enjoyed this Cool Search Boxes. You can also subscribe  us to get our next tutorial in your inbox