 |
| search icon |
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>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.
.search-field {
background-color: transparent;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5_LvOWiZKeplOZps_jAZOjKaTh3C5eA066swlWrPmN5nnOGegxzuno9Rokov61AQAmAmjVe_Y9f-xuBvvVX2R314ILU3WeWJSDFEJwzyDT-y87A8C4oCfi6FpyqbOwLSPn37xOquLL-s/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-family: Arial;
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>
0 comments:
Post a Comment