We moved away from boring gray search boxes long time ago. Now we have some futuristic ones. But sometimes even they look dull. That is why, I have created the following search boxes for blogger. They are inspired by the script of Hamid Shahzad. You can add any of the search boxes to your blogger site.
Instruction:
1. Copy url of your selected search box from below.
2. Place it within the bracket of the script:
<style type="text/css">
#hs-searchbox{background:url(paste url here) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#hs-searchform{display: block;padding: 10px 12px;margin:0;}
form#hs-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#hs-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="hs-searchbox">
<form id="hs-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://www.hamidshahzad.com/wp-content/uploads/2013/03/blank.gif" id="sbutton" />
</form>
</div>
3. Copy the script.
4. Go to your blogger layout and select "Add a Gadget"
5. From the pop up window now pick "Html/Javascript. You will have its box now ready.
6. Paste the script within it and save.
With Props
Sophisticated
No comments:
Post a Comment