» » » Add the Search Box in Your Blogger - Six Forms

Add the Search Box in Your Blogger - Six Forms

,
                                    

There are many blogs that used a small rectangle to search in the blog, but the form of plain does not attract attention to him, especially visitors, many visitors and even when I was browsing through some websites and blogs do not pay attention to the rectangle for research, so these boxes for research are colorful and all tastes.

So followed me this explanation is a simple way:

To begin using this new gadget, go to Layout> and click "Add a Gadget" and
select HTML/JavaScript


Figure I





Its code

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg04oTSH3nfiXIYJICa4mIicFJ-uVdd_s9WjWAWwub4l519nkQrjMxhUqmMvriLA1_knQ9NHRDMGAEOU0t7SrSV-K5NTK_ERKxeo3x6YD59rw4sZFFHo0wAwYjzq3mSToywOWx5Tqvp9F2U/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>




Figure II





Its code

 <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQQnoiNaHKeD8IUOrqie0KXAloQ8dvYiovNcuUXd7ag8opFJhhojKvQ8uMuBuHVJbiCv5ke2Rk-0sASGg1-iB9AChZJnkAmA8n6ZqDCS7vqyTM17TXSc2h_7spTFRPmH-iB4P51niz7HlQ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>



Figure III





Its code
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6FNXdOAb5H2DCeNEsk9TYtxuMX9kLgk2DhqH_i93y64ylM_sClPDTDy8h-gcw8Gz-8kd9k2qL6QkR1cwBjoPsCLuNkGVPbMyCRef8EjVg5P45M_eovQxuj-ip2WvLcICsKOMoWWRJHHG/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>
Figure IV





Its code
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdBUvjrJXyBjQAhwfXk4YujCzFVnyjwfX4mqi6pxv6TltNa3QYNRwhB-rJ8IsFpPtrOmz3g0uN1Kw7sD_sd_fFF1MKQPNs5JPZxspQCe5UPhDpy_ek6XlfuQcspURRTeipMtwAB0u-lLT/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>
Figure V





Its code
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhci_fC2wg12O49UlBYikMKl6b2TxznYDW9qQ_OAGsbf8hTiw0HCme-GevgdXt1-dGEbXpGBS6CCCpCDjlFkKkYf1_oVEjBWWFr3L6pZ7QgbLm6X97H3lWg-2U3bYJBeI2_Js0o49bX5kqy/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>


 Figure VI





Its code
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfK3GuRa-JWuvrXrm98LCYXtlrBMtySQHUl51LF63m7XG708ekYqEWYxWzqYWOMWJOI6aEAyPO3jP279fZKs0p3Einyf7kgMZXjPR9bwsgRYAYVf4xzMBCy1F_6b_xccIzTpKqZFEhpPy/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-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>

In the latter save tool

Drop Your Comments And Questions Below.

Related Posts