Add 8 Beautiful Search Boxes Widget For Blogger


    All blog’s need search box to find visitors article. Here I adjust code Fresh and Beautiful Search boxes to your blogger blogs. Here i give eight beautiful and fresh search boxes to you.

Add beautiful Search boxes widget for Blogger

8 Stylish Beautiful Search Box For Blogger/Blogspot Blog:

  • Firstly Login to your Blogger Dashboard click here
  • Select your blog and click on right side bar
  • Select Layout on drop down menu
 8 Stylish Beautiful Search Box For Blogger/Blogspot Blog:

Step 1:

Create an search box in Blogger HTML/JavaScript Gadget

                   A. Click on Add Gadget in your template sidebar
                   B.  Choose  HTML/JavaScript Gadget
Create an search box in Blogger HTML/JavaScript Gadget

Step 2:

Add HTML Code to Search Box For Blogger/ Blogspot:

        A. Write widget name in title box
        B. Any one style bellow code paste in Content box

Add HTML Code to Search Box For Blogger/ Blogspot


Style 1- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog


Style 1- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

<style type="text/css">
#h2b-searchbox{background:url(http://1.bp.blogspot.com/-IpqUqfF6g_0/U5WhOMBdgRI/AAAAAAAABVE/hBHwmkx_Edw/s1600/searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#h2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#h2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#h2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="h2b-searchbox">
<form id="h2b-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- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog


Style 2- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 2 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-VVnt2UbE1_Q/U5WhOYmHifI/AAAAAAAABVQ/mg6XJI-C1TE/s1600/searchbox2.png


Style 3- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 3- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:

You can add 3 style just replace red color code in above 1 style and past the bellow  code
http://1.bp.blogspot.com/-NNmQGPEYwk8/U5WhOtRXbYI/AAAAAAAABVM/iZ9r-bXaXqU/s1600/searchbox3.png

Style 4- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 4- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 4 style just replace red color code in above 1 style and past the bellow  code
http://3.bp.blogspot.com/-_shCHCENu9A/U5WhQYQDNuI/AAAAAAAABVc/po47W6WZFnM/s320/searchbox4.png


Style 5- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 5- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 5 style just replace red color code in above 1 style and past the bellow  code
http://3.bp.blogspot.com/-pRJOA-uH5AY/U5WhQfBOzMI/AAAAAAAABVg/C05DxS1TxFs/s1600/searchbox5.png



Style 6- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 6- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 6 style just replace red color code in above 1 style and past the bellow  code
http://4.bp.blogspot.com/-lXbsS5nfSzw/U5Wlkk7v_bI/AAAAAAAABVw/aZ3joi2z9Bk/s320/Search+box+6.png


Style 7- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:



Style 7- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 7 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-ro04HZj-j6A/U5WllIRJEhI/AAAAAAAABV4/Qfbl1Y3AroI/s1600/Search+box+8.png


Style 8- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 8- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 8 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-ro04HZj-j6A/U5WllIRJEhI/AAAAAAAABV4/Qfbl1Y3AroI/s1600/Search+box+8.png

> Click on Save button and enjoy.

˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜------------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

 http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html  http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html

Comments