Tags: Freebies / Widgets

Add 9 Beautiful Search Boxes to Blogger

- No Comments

Having a search box on your blog is always recommended. Search Boxes are the most essential element of a blog, allowing your visitors to dig and find contents. Search boxes allow your visitors search for the content that they are looking for. And as we know that flat design is the hottest design now-a-days so today we are going to share 9 search boxes including flat design boxes. Flat design search boxes are designed by me and i hope that you'll like it.

9 Beautiful Search Boxes to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Layout >> Click on Add a Gadget and select HTML/JavaScript Gadget from the list of Gadgets
Step 3. Now Copy any 1 Search Box code from below and Paste it in the HTML/JavaScript Widget Box

Style 1

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8VcPCwVlDECY8l60Bvk10ulh5oykC1OxZpe_7AuprXFkTTQ1PDbzKciHN8fDLE4HjO4VCFXA4LwcoICTnz8rVap6mpq_uwNK5njEXAJICvR3zqt0uaajcmDvyQXiuT1cSlRIaWH_fuYLk/s1600/blogolect-sb-style+1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 10px 12px;margin:0;}
form#bgt-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-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">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDBnltjv5oT0ssAXEzfUYlXQoBFM57dBJnzWe90ktRgScCfzGBDqJ5Jp2owH_Lx0jIzWsudMiXwQRF06w-i7X-kqY5zDIwOLnGpdeCGuvXzSKFiEfOC_FgDhfkV9J9pGAaDJ1d54hcZvBF/s1600/blogolect-sb-style+2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidnCFx_BiZcwaKpVGCIzhH_NXb1_hk9gq0-0xhp0_QLVQxVo0kktl5P543_M1yIJM7yP8u5-ryS7E7kq95Yu-yll1sOu6yPlspRboqBFO-0f31vte0MpgOJhYhJ0PcoC4JBQ21mzj345j7/s1600/blogolect-sb-style+3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwDhPG403uflfiKAAl96bGGZYzLfENkbRU5npezsHOFPLGyYm1iGE_OeFo5Z3IMIb5n4bD4jM9yt_blgM1CLFxHMNumb3TVzNAguKmAWS1J2AgZVUBIquZX6POvDBnz9BQpR7ZKHL3vLM/s1600/blogolect-sb-style+4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 10px 12px;margin:0;}
form#bgt-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-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">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-lQmfYtzR-JQebEsdQ6s_OfUoutO-R3w-TiYYxKb19_EzKj6QeehUTu8N76QJGgN8ivc0Mlxdy0FRRu5a4Ff7aqg_0dqE2BVxRsJ2j5VKm-I6xWD2h5BICy8zwSqD1h95ekP1MVDsjfUM/s1600/blogolect-sb-style+5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdP5PhzeT5zIhQbjp-zbD2I_cp-_eYy-JStnV7dDrWBgc5oCRAvBlFQiORaX3aNF5f929rmXobMJf7ryaodV1lpabqPgg6PkIFziNtEp6v_yrD0X6PEDXefZ1nHOpirwF3QAVdqVFjHhq/s1600/blogolect-sb-style+6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 7

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirC-D8J0E-7uDIAog98ibRwtdimg8oqvRImZ8yzjSTloNXizEfm6OaVeC-w9NLtpET41f7n1a-7pYSB5IZ_4gXq2cQVLhbdDsppmbAhdUjt_j7OqrnMJn602jhuFh-In2CLj1Iz9Xee3f/s1600/blogolect-sb-style+7.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 8

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDeojnqT4CtLsFdh4lDvTpvFNkrYpm-pM7O1KhGBMin2dhP-Bo8KUp2S0ytDbrtRaa5yvdrd0Vl9NOpC5IVAZ8T93EGZCYmLdYjXQzeO4oWBJ_wXkOEQEpsQModkK1r0wWmPBiFhl2LpJ/s1600/blogolect-sb-style+8.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 9

<style type="text/css">
#bgt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0vCjwQZc-qypd4JIl5n_-DUWaHdc3KVFNARsksYV2-wBj78LohZqtBeCRNp9MnsdqKkZfP6dN24CBSSG3vD-B95gJEgWdF5YhPj03FfSxLry6bzmco_VDFyVntrfVtyfCALvgAytUYLs/s1600/blogolect-sb-style+9.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#bgt-searchform{display: block;padding: 12px;margin:0;}
form#bgt-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#bgt-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="bgt-searchbox">
<form id="bgt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>