Buscador Deslizante.

Como Muestra La Imagen, El Buscador Que Les Brindare Se Desliza Al Poner El Mause Encima De El Con Una "B" que significa Buscar Y Alavez El El Icono De Blossh.




Bueno Aqui Esta... 

 HTML

<form expr:action='data:blog.homepageUrl + "search/"' id='search' method='get'> <input name='q' placeholder='Search post in blossh .' size='40' type='text'/></form>

 CSS

#search input[type="text"]:hover {width:280px;} #search input[type="text"] { background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv8OuZHVxSYyEO43Zve_5eQIwenmrODhkMQjMiajktek6Hws1eFZQl3OyHoUXXqxHSctLrzNHdWZON90LTJqDMnGERSkDRuoxSCZQbUi8krEDerxwaZDAjbCrAajgMCY8G15aJttGxO0s/s1600/Blossh.ico")no-repeat center left; font-size: 13px; color: #222; border-radius:15px; border-color:#c9c3c3; width: 0px; padding: 10px 5px 0px 20px; z-index: 9; border: 1px solid #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; margin-bottom: -1px; position: absolute; top: 0px; right:10px;} ::-webkit-scrollbar { height:12px; background:#E0E4E4;} ::-webkit-scrollbar-thumb { height:7px; background-color: #7ABCBC; }

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati