How is this search form looks like? Thinking of having on your Blog! Ok, I did some work with Photoshop and made these images to give a professional look. It is free and you can very well use it.
Placing CSS:
Place below CSS before </head><style>
/* Search form */
#search-wrapper {
padding-top:0px;float:left;height:35px;width:249px; background: transparent;
}
#search-btn {
float:right;height:35px;width:47px;
background: transparent url(http://i55.tinypic.com/bc3.jpg);
border:0;
padding-top:0px;
margin-top:0px;
}
#search-box {
float:left;
height:35px;width:200px;
background: transparent url(http://i51.tinypic.com/epn1ht.jpg);
border:1px solid #d6d6d6; }
</style>
Placing Form code:
Copy & paste below code where ever you require.<div id='search-wrapper'>Change the text in red as you required.
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id="search-box" name="q" onblur="if (this.value == "") {this.value = "Search Premium Skin";}" onfocus="if (this.value == "Search Premium Skin") {this.value = "";}" size="25" type="text" value="Search Premium Skin" /> <input id="search-btn" type="submit" value="" /></form></div>
Features:
1. Both images are transparent, so where ever you place the form code same color will be applicable to your form text boxLive Demo:
What do you think of this search form? Do you require any update for better improvement?
Tags: search form for blogger, blogger search widget, blogger search form, blogger search form code, blogspot search engine, blogspot search engine optimization, blog search engine submission