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/AVvXsEjSk4WvSzWy2ieMEYFwClU_qRhwfr4gf8IbSSUk2-7-Pp2O_C930vaI4r-CWlN16u6DIhyHcNOPGYBjmlYXS6_TRaYKL-pxtTdSNRmjFXYQsPm_DC4PO6I0nruutlfu1OS-FWtqL81QIWLF/) 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/AVvXsEjHGcObGGvHIkRfqm9ElPuw7Yt0T05hBOXlqp77xexvft01-GKBx8gzfGi8lKYAiBpjR74_sIPvUqqbK6eI3K8vRlw0JzaKcP3S7dx-vdFj2AWJZAQNWkMPtG26_8Pn0JniNPAoxUNbOxXG/) 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/AVvXsEjahAz9CaAPUhaNcvbTZPNLnjhrWBLEFD0zvDg9pRXNNk50raHLpnFCeFGgYl4-xwQvk9sM7PDhnC5YkAzc07laX0CdRy_O7MMQ9weSxWm9U2Xa0iNvwqF_QgPQho9KoRniQMDci6sJYHHi/) 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/AVvXsEiFlIkJht2VZ7vW9eh1sZP4D2qju_PS10-xXBBF7YszU-2iobPczkD3znLa9x0AQDH1rEPQFR19K5UR17NAQHHvd1d9V6bfTp1N6nRWPuuTFYwmKE75DaHeSQ54dyOU07ZVmG_z5aVxstV6/) 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/AVvXsEiF3zc0_MdSZY7E3AuR86c8_zgLj4bubB98l2ysdpyXw82EK1T2pFPSg-0_YRvAUA6RsD1tOu6uoGBtElVsniTxWi7Rpp5TJQyFjDnqkrY4FXvxvh7SG8VAL_Q4DKcAHggahy3QunPVFtyt/) 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/AVvXsEiMWohCzxO784n-9t5m3_OnLnVO1scquw8l1RWuC_LJt16StQbhlBqlzkx-cfHSHfCAeanpBYL3zavL4LDEJUwfv5mSCc-eTBmWxBzQD-KngSh75quDbyJeK0XGiezTV6R5UVpvVLCP2GM7/) 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.

Anda baru saja membaca artikel yang berkategori Blogger Tutorials / Widgets dengan judul Add the Search Box in Your Blogger - Six Forms. Anda bisa bookmark halaman ini dengan URL https://bblogger-tutorials.blogspot.com/2012/12/add-search-box-in-your-blogger-six-forms.html. Terima kasih!

Ditulis oleh: maz - Monday, December 17, 2012