Gadget de pesquisa personalizado *edit*

Oi! Como estão? Bem? Hoje vim trazer um tutorial de gadget de pesquisa personalizado por mim :) Fui tirando prints e fiz um gif que ficou horrível eu sei rs para que vocês tenham uma prévia dele. Quando você passa o mouse por cima ele desliza pro lado aparecendo outro botão em hover. E quando você clica pra pesquisar o botão vai pra dentro. Como eu sei que por print não fica uma coisa tão atraente rsrs, no meu blog em que testo tutoriais e tals, vou mostrar por lá para vocês verem melhor clique aqui para ter uma previa!!!

*edit*

Ele só foi testado com a sidebar do lado esquerdo!

Leia mais para ver o tutorial e se forem usar por favor avisem nos comentários e creditem o blog, por favor! 

Cole acima de ]]></b:skin> o código abaixo

div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(http://i48.tinypic.com/20gb68x.png) top right no-repeat;
}
div.search-form .search-sliding {
div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(http://i48.tinypic.com/20gb68x.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 35px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 280px;
top: 10 px;
background: url(http://i48.tinypic.com/20gb68x.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}

Depois do código colado, abra um HTLM/javascript e cole o seguinte código para que ele apareça

<form action='/search' class='search' method='get'>
<div class='search-form'>
<label class='search-label-sliding' for='search-sliding' style='left: 15px; opacity: 0.4;'></label>
<input class='search-sliding' id='search-sliding' name='q' onblur='if (this.value == "") {this.value = "pesquisar";}' onfocus='if (this.value == "pesquisar") {this.value = ""}' title='Pesquisar post' type='text'x-webkit-speech="x-webkit-speech" value='Pesquisar'/>
<input class='search-button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghmNJIOkyU1ZhQBxQUOhmlvUgZKhdigPokD4T_3wTV6YPxHx1HieTIiO7PeJrh5WJAi05aUWMtrR9xG132D3X_xWcw9tPV3qPPagaULbWPOS5f0IAZ_iPscDCoGKQ8JnhAU499uUG-Usx5/s0/transparent.gif' type='image'/>
</div>
</form>

Espero que gostem amores! Beijos e não esqueçam de comentar que posto mais tutoriais desse tipo!