Trackers-Style Search Box For Blogger

Posted by Yuga irgi on Friday, May 09, 2014 in Blogging Tips, Widget | No comments

search

So I re-designed Techsperia and turns out quite a few people really liked the new search box I used. So I said hey, why don't I give the entire code like always do! It's the same 'ol <input> tags. One behaves as a text area where you can type and the other as the search button. It's coded by my friend Suryakant and hence I gave the title trackers-style.

Let's jump right to business then...

Live Demo:

Talk is cheap, show me the code!

<style>
#searchform {
padding:20px 0;
display:inline;
overflow: hidden;
width:100%
}
#sbox {
font-family: Verdana, sans-serif;
outline: none;
float: left;
font-size: 10px;
height: 17px;
width: 65%;
color: #260d0c;
font-weight: 400;
padding: 5px;
border: 1px solid #D7D7D9;
display: inline;
}
#sbox:focus{
border: 1px solid #ECA919;
}
#sbutton{
font-family: Verdana;
font-weight: bold;
cursor:pointer;
color:white;
font-size:12px;
margin:-1px 0 0 10px;
padding:8px 15px;
background:#ff9b00;
background:#ff9b00;
outline: none;
-o-transition: background .3s ease;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
-moz-transition: background .3s ease;
transition: background .3s ease;
}
#sbutton:hover{background:#313131}
</style>
<div class='track'>
<form action='/search' id='searchform' method='get'>
<input class='sbox' id='sbox' name='q' type='text' placeholder='Search this blog...'/>
<input class='sbutton' id='sbutton' style='border:0; vertical-align: top;' type='submit' value='Search'/>
</form>
</div>

The code highlighted in blue is the width of the text area. You can vary it according to your needs.
#ff9b00 is the color of the button and #313131 is the color of the button when hovered. You can change it as well...

Oh and yeah, you can also change the text which appears when the search box is not clicked on. Simply replace Search this blog... with whatever text you want.

Add this code wherever you want the search box to appear. If you are new and don't have any idea as to where to add this code, I prefer you create an HTML/JavaScript gadget and add it there.

Out of these 3, my personal favorite is the elegant one! Which one did you like the most?