Don't Miss

Add 9 Beautiful Search Boxes to Blogger

By Zohaib Liaqat - 1 Comment
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(http://2.bp.blogspot.com/-ryYzVirpx_U/UtQn1_UHmKI/AAAAAAAADXg/016hUbMuUHQ/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(http://1.bp.blogspot.com/-ko2KZ8inX9c/UtQoyIyeQCI/AAAAAAAADXw/HJ2DlYznqvA/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(http://1.bp.blogspot.com/-8ZCs84g9OBk/UtQqo_GMQeI/AAAAAAAADX4/q3DcrVHmW8s/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(http://1.bp.blogspot.com/-LkwpzL7FCkk/UtQsHBdjmSI/AAAAAAAADYE/jeVq2NFqxaw/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(http://4.bp.blogspot.com/-Ntwh5ayMBN8/UtQx6deHsdI/AAAAAAAADYc/2XM3D1NjZLo/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(http://2.bp.blogspot.com/-3bs2MsjAa2g/UtQyra0jwDI/AAAAAAAADYk/SmKW8k-ZVak/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(http://4.bp.blogspot.com/--8QgfYEBUMI/UtTQXTwZSXI/AAAAAAAADas/Gs34V-o8qvk/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(http://2.bp.blogspot.com/-ySsM9qbfZ74/UtTQ5iscgkI/AAAAAAAADa4/8eAGZ0hNT2Q/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(http://1.bp.blogspot.com/-jhub1_JAUks/UtTTxsQnduI/AAAAAAAADbM/wFS2qno3QTQ/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>

Step 4. Hit the Save Button
That's it...
 

1 comment to ''Add 9 Beautiful Search Boxes to Blogger"

ADD COMMENT
  1. One night you look at the full moon in the sky while being chased by were wolves and wished your replica watches had a moon phase complication or was at least spiky and made of silver. It is very expensive but maybe it is a really well finished movement. Maybe, you never know. The case on the watches store moon phase is quite masculine with the coin replica watches sale bezel and the simple curved lugs, while the hands are quite feminine and fit the overall aesthetic. Great to see a pointer date, so glad they did not decide to introduce a cyclops to this rolex replica uk too. However the moon phase just tries too hard to be different from everybody else. It does succeed to be different, but in a rather frustrating way. Most people these days want value and many of us are really care about the metal out replica watches is encased in, as long as its scratch resistant and looks good I could care less. I love that replica watches has decided to get into the game of taking on brands like others with dressy men complicated watches.

    ReplyDelete