Tuesday, June 14, 2011

Add different search box code for bloggers

Every blog should include a search function. If a reader and click on each page or for each category to find what they are looking for and then you can leave out of frustration. Adding a search function will be happy and make your player is easy to do.

simple instructions will show you how to add search box

I will show you few style search box you just apply whatever you want.for doing this you just need to follow few step to make a search box for your blogger.

Log-in to blogger with your username and passward go to the design tab ==> click add a gadget ==> now choose HTML java script and paste the code according to your choice than save it all.


<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Click to go" type="submit"/></form>


The search box will look like this below.


You can also try the another one search box utility.you copy and paste the code in your blog

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" style="background: #ffffff; border: 2px solid #cccccc"/><input id="search-btn" value="Search" type="submit" style="background: #cccccc; border: 2px outset #cccccc; color: #000000; font-weight: bold;"/></form>


The box look like as you can see in below and you also change the color size  and font as you required.




I just show you the anoyher one box read it.


<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="search-box" name="q" size="25" type="text" value="Enter search query"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5izhh_r-7GfWCV0MtJ4v2YZMJozAXuYm6AzkEh-OLpPRzwE1gVQOrtvRcAMfLy4RqIx4hBN6xUw4XtVTPD2TRsID-ufchyphenhyphens8Wi7EvzD4lJDikkg84oAp2lVVDbaSeRdOF2Wxpp9J5Usw/s1600/magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>



this code show you the image like this