Navigate

Cool Search Boxes for Blogger

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