1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<style type='text/css'> div#search { background: transparent url("http://3.bp.blogspot.com/_4HKUHirY_2U/SwZCwFFG_yI/AAAAAAAAAQ0/ulhHnhO8ruI/search.gif") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; } div#search form { height: 44px; } div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; } div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; } </style>
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == "") {this.value = "Type your search here...";}' onfocus='if (this.value == "Type your search here...") {this.value = ""}' type='text' value='Type your search here...'/></p>
</form>
</div>
Note : Replace "YOURBLOG" with your blog name.
You are done.Look at the picture below.
Nice..
Thank you
Nice post. I found this blog with withbest practices for creating a search form that is quick and easy to use http://blog.caspio.com/web-database/7-tips-for-creating-user-friendly-search-forms/
nice share..
thnaks for this wonder full tip