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.

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

 

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

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

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

<style type="text/css">
#h2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrgLEcT-lI7vhv0ia4GOcbD9ZV6PLuaU-goB_2EU6sHwRBm9e2nXOoKUTbMKbbm9Z2gcFLRZeAKwvyGXbYgLdOgIsFhhuiuPu08-QUDq526FXrCnJktAHpJdVe8YVf_KcyvPQMuJUdbei/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

You can add 2 style just replace red color code in above 1 style and past the bellow  code

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPRLHZLK6kEQnH4yZSeEHBhVSw-F7ISVomxVx4LTsEBNUOhq0oy_NPcOSSYnXaFYaA82NVv1JHPfG8QY-BZOMCX1p6LRFjTLQRyiVlllonVGCds-qi8uoWeo1CVmKy8YLhoBmHEflD0_Tu/s1600/searchbox2.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZfNYv6rljpPCVU_FwO1nvFBPWxdl1CKMqGqcjpwlKHLNPl2HvKWhrOT7SDOOzakU7x8G_SMCQ7bX_IpJ21pFzzvBkS_Mm5nNi-KRed3xUbcGPCXlR-eGt9AsqNKGL6ln0RqQ1x1ujs4k/s1600/searchbox3.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimEIJW64d0qD7DEcMBKupMDibmgeNRw_ow_aPbYk44duv9wPG3Y2uA7bKLKoSjhPzQNw6rnU3Ln-cIrxD-ufjfjjqVp_DN4nVp-kIYJQqZgz1KnmSNH18yeMedDIuhrIHpxn7wlsso9Dzt/s320/searchbox4.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCMPreTdD5AwqGG5WteX5f-UpckUXVr2w2TwPxrrLTGdLr8NNBSVnq9-kdv_CuBGovkYudqzfYZjVN8sur6uiIDr9-4NLJtP7AGiWtl_Z5eX8pQd8r-OXMuJvYL9zYvjl3Q4DapYB9Slu/s1600/searchbox5.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI6j867gQJcomdZgJtqPU0eJr4z90Dgf_Qs5GiRDaGVsWFaFuRhIwFFaCb_Cm0Wpkr6JXdrq2XirC2axz8z-EpFJzkU-S0e37L5uayrEW1BH6frpBFOiOy18QnNjFx8qHx39pxs_vF2Zuv/s320/Search+box+6.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4tG2QXuVXXSQhE9LS-8xVBhedEAVZPRTfSQrecCFkNKG1vf5OKB07nZmTS5wY3DlE2ShntmZ7WK3OU4sgUrR67tjf5cwdlxE8S8uZ4I9ShiirFvhPFQ1FrxaaUkR_fFTRUx00tLzA3SQ/s1600/Search+box+8.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy4tG2QXuVXXSQhE9LS-8xVBhedEAVZPRTfSQrecCFkNKG1vf5OKB07nZmTS5wY3DlE2ShntmZ7WK3OU4sgUrR67tjf5cwdlxE8S8uZ4I9ShiirFvhPFQ1FrxaaUkR_fFTRUx00tLzA3SQ/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