Elegant Search Box For Blogger

Having a search box on your blog is always recommended. Previously, I wrote a tutorial on how to add an expand-on-click search box to Blogger.

Today, I've got an elegant search box up my sleeve which I personally use on Techsperia!

A little search icon will be displayed and the moment someone clicks on it, woooh! A search box will slide up and your visitor can start typing right away!

Live Demo:

Talk is cheap, show me the code!

<style>
.search-field {
background-color: transparent;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9I6nYtkFe61-51KhbP0EMZwM15QY31LS0GQHsbXxnxJ0csNYElBfqbgMffXVyoMtmmXTLvc6Og-7yk2F14HwJ0GoM-JyqgCNTzn_pReb-LojouP61S4CvOvYqy6-5taSuBmwFEBM0_k/s24/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: 2px solid transparent;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition:         width 400ms ease, background 400ms ease;
width: 0;
    color: #222;
    font-weight: bold;
}
.search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
</style>
<form action='/search' id='search' method='get'>
<input class='search-field' name='q' placeholder='Search...' title='Click to Search!' type='text'/>
</form>

Code Credits: CtrlQ

Paste the above code wherever you want this simple, yet sexy search box to appear! I do recommended that you split the header in two parts and display this search box besides your blog's name/logo. Else, you can always add the search box as an HTML/JavaScript gadget.

The one thing that I love about this search box is that it doesn't take up much space! Why bother our visitors with huge and fancy search boxes even if they don't wanna search!?

After implementing the above given search box, only a little search icon will be displayed so that your visitors won't be distracted. For the visitors who really want to search, they can click on this cute little search icon and the search box will pop out for them!

Some pro tips

• Let's say you don't like the search icon [which I used] and wanna replace it with some other image, you can simply replace the code highlighted in red with your image's link!
• Replace the code highlighted in blue to change the height of the search box. Now this is really important. I personally have implemented the same search box on Techsperia by reducing it's height!
• You must have noticed that when you click on the search icon, a text box with border appears. If you wanna change the color of this border, replace the code highlighted in pink.
• If you want to control the width of the box after it is clicked, replace the code highlighted ingreen and experiment with various values until you get what you want!

Happy Searching!