ikmalTips : custom search bar for blogger

A simple search bar function. That`s all that you need (and me too). You don`t need option that can be check to search on major search engine. You just want a search bar that can find post on your blog using specific keywords. Many of widget providers gladly provide you with their creation and embed them with link to their promotional sites. This ruins everything.
You just want the simple look. But yet, you still want to tweak it yourself. Maybe just a bit, like the color or something. Maybe simplicity is the best policy are quite overrated for simple search bar and giving them dull looks.

Then this just might be the solution for you.
Credit to the creator of this widget is given to Amanda Fazani from BloggerBuster. Visit her site for informational tips on blogger and easy-to-follow tutorial. Show me BloggerBuster.

Let`s get on to it.
Simple Search Bar for Blogger

Step 1 : Add a new HTML/JavaScript Element

• Navigate yourself to Layout > Page Element > Add A Gadget (to the place where you want the widget to be shown) > HTML/JavaScript

Step 2 : Add the following codes

<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>

• When preview, it will look something like this

• If this effect is what you want to achieved then discontinue reading. If you might change the border or search tab color, read on.
  

Step 3 : Styling the search bar
Let me preview to you which version can you achieved with this simple code.

- Changing the search tab colors and tag

• By adding this code and change codes in purple for the length of the search bar form, change codes in red for form color and codes in blue for form border color. For search tab, change to codes in grey for tab color and codes in orange for tab border color and in green for text in search bar tab
  

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

• You will get this

- Adding visible text within search bar form

• By adding the text in green
  

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

• You will get this
• You can also insert onclick="this.focus();
  this.value='';" within these area so the value will be empty/clear when the form is clicked.
  

- Changing the text in search bar tab

• Change the text in purple

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

Experiment to suite your taste and your blog color scheme, leave a comment for how to change the tab into icon.

That`s all. Thank you and happy customizing.

More topics on ikmalTips.