Web Reader Welcome

Senin, 11 Juni 2012

How To Add Searching Box in Your Blog

Haah... It's been a long time since i haven't posted any, i should face some exams and now i'm free... But that's not the reason why i 'pause' my activity in this blog, the real reason is that i have had a new blog http://mymoviewatcher.blogspot.com hehe i want to advertise it hehe...

All right, now I'm going to post 'How To Add Searching Box In Your Blog'
(This is the simplest way of adding gadgets ever)


  • First, copy the link you wanna choose below this

- Basic Shapes (1)

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/> </form>

- Basic Shapes (2)

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

- Basic Shapes (3)

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #ccccff; border: 2px solid #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #000066; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

- Basic Shapes (4)

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Search In This Blog"/>
<input id="search-btn" value="Search" type="submit"/>
</form>






- Unique Shapes (1)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQ4x38GbOpBTnGvNK8rb3BVammtQlq2O0jvDnepuahe_uA-WOl8faGjZb2grKHfgPym8Xy7TGqUGMoCVD7sjKQwxSrJuKLLMplQleYEyLJym8SdB40-el1BafxaIQQKuD6IalBnbMChda/) 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>

- Unique Shapes (2)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSiqz7Wb5munOdzgmyk7PpAUy8wdpoHpNMJVSJhvvxpGjQT-Rpm4ivQIi6grKCdR7amFJAJcj7bvYa30j_KAko9zpucuMpeG0kuCeRv1up9DsuTvfIRUAeL1u2oexsKFkK7kkwnIJBcB8/) 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>

- Unique Shapes (3)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-MoYollUnJvfHUMrh-nyUx8vXa_TQwP567xOB0iGmbl1vNy-JkdYY5WeDCl281FjuY7c3Fi0ciMvFFch3Dxc3dkhvOF1PoSlt3JZxqLiW3tEbER9KilAG5ZMM5RDYVOKnL1sy9uiwfhZC/) 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>


- Unique Shapes (4)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Wf1YBlSIAbWJOA-N3zz_dD7QyQGd8ZI3ZQjoCbqX_pkQseuy-FAFTWAZVPmEtkS-8-dP7f8DqZ2Hmb34prFgS-7l0nEpHtmCKJnb7oRknb-bIfxsYhAU7l0XDT8tIanCQKr5g8VpaBJ0/) 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>

- Unique Shapes (5)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWk2PzKDnv8XRPaZry5QixeVmnmOi9a4f5Uw2qnAg9X7h8LKRQAFIng1hHhyphenhyphenukxBi0NQEXqiCl4h-8S2IIHTckVDWygGP0W2DEqtDJsW0ukNLVAlPwLrZbJ_HAXlozT6wXvZeMBnhbQXrN/) 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>

- Unique Shapes (6)


<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJB0SeFA4_5AFSDZLXnF39rUYvyq5gpjoH-mAny5eIzrzqaH3v-ovsVi9z1EbCMX7d8PLep_eGylzwRI5_BrsNzVTAkOkLn17LtiOK2xQV-6_dZNRDIbpTgqFTOENgy80TbT5tTQ1VNCvk/) 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>





  • Next, open your blog   
  • Click 'add gadgets'
  • Choose 'edit HTML'

  • Enter all the copied code
  • Save the settings

  • And now your 'search box' is ready to use

Yaap, that's the way to add 'search box' and if you have some questions or problems you can ask me by sending me via blogger or to keniaderia@gmail.com

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)