Widget Search Box For Blogger & Wordpress

6 Search Box Cool Widget for Blogs . Widget search box to help visitors find what they are looking for on our blog. And of course this is very useful. Furthermore 99.99% of the bloggers putSearch box widget on their blogs.

6 Search Box Cool Widget for Blogs

Widget search box you can plug it to Blogger / blogspot and wordpress. Blog Bamz will be sharing for bloggers yah! Feedback longer open wordpress lazy: p. Here's how to install the widget search box in blogger / blogspot .

How to install the widget search box in blogger

Login to Blogger> Edit HTML > Add New Element > HTML or Javascript
code Copy one of 6 cool widget serch box below and paste it on the new element before. Widget Search Boxes 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4kvPwtdkO3gfvRd0ndadkf00waFMRCVfHYgB6_SFP-Fm6xerVzEYGZc_bGXLSLywQ9O35M69ZGakTTZGPT2TRlstt49pJruaKBLQqvJEj3hFQHeF70H50YN9gWD-Xrda7S4O5Qe_B4Zbg/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>

Search box 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxIwivK2O_A_chgB1xWzFG0n4GJnib7gkk3xoS54fGaclVsA-X7GXCL5AIOuTGuAKiDD-lLJYESkHXSQtQ4mC3EXRrFTUFQmhJ3RJt2ESrvuoCo0m_QFgZEReprbhpkFqfnfEDjqXZ-TE/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get"> <input type="text" id="b" 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="bbutton" /></form></div>

Search box 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxN1UaNRaZMiTgTOmrA3Nw7obhZtD9bW1F3zeyrM23X3WXAG4IpjsjcDiRsvkjwLSJy4s2LKEa1AFc8SqHWpmHjESoUrazUsDnGbYLX7cyq8ZuvfEh7txcHVnCQh03U_yzlTxa68ON7y3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get"> <input type="text" id="c" 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="cbutton" /></form></div>

Search box 4

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

Search box 5

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

Search box 6

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

width: 307px >> Please change the width of the widget to your blog.
If you have any problem Comment on below

22 June 2014