Barra de Pesquisa com Transição

glamourus, glitter, ke$ha, lips, lipstick, pink

E aí como vão vocês amores? Hoje vou postar este tutorial para vocês aprenderem a fazer uma barra de pesquisa com transição super legal e de código simples que até mesmo você que não sabe mexer em html pode tê-la em seu blog sem nem mexer no HTML nele! Clique em Leia Mais.


TUTORIAL


Layout > Adicionar Gadget > Gadget HTML/JavaScript

Nele, você cola o seguinte código:

<style>
.search{
line-height:25px;  /* Não Altere */
margin: 0px;  /* Não Altere */
padding: 0px;  /* Não Altere */
font-family: century gothic;  /* Fonte da Barra de Pesquisa com Transição */
display: inline;  /* Não Altere */
}
.searchbar{
height: 20px; /* Largura da Barra */
width: 140px; /* Altura da Barra */
color: #7A378B; /* Cor da Fonte  */
background: #FFFFFF; /* Cor de Fundo da Barrinha*/
border: 2px #7A378B solid; /* Estilo da Borda da  Barrinha*/
border-radius: 20px; /* Borda Arredondada */
}
.searchbut{
width:73px; /* Largura do Botão */
height:21px; /* Altura do Botão */
font-weight: bold; /* Fonte Negrito */
border: 0; /* Não Altere */
padding:-10px; /* Não Altere */
background: #7A378B; /* Fundo do Botão */
color: #fff; /* Cor da Fonte do Botão */
-webkit-transition-duration: .80s; /* Não Altere */
border: 2px solid #7A378B;  /* Estilo da Borda do  Botão */
border-radius: 20px;   /* Borda Arredondada */
}
.searchbut:hover {
background: #FF3E96; /* Fundo do botão com o Mouse em Cima */
color: #fff;  /* Fonte do botão com o Mouse em Cima */
filter:alpha(opacity=100); /* Não Altere */
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1; /* Não Altere */
-webkit-transition-duration: .80s; /* Não Altere */
border: 2px solid #FF3E96;  /* Estilo da Borda do  Botão com o Mouse em Cima */
}
</style>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' type='text' value=''/>
<input class='searchbut' type='submit' value='Pesquise'/>
</form>

Salve e visualize. Espero que vocês tenham curtido o efeito ^^

Se vocês quiserem fazer alterações, vocês podem mudar os campos determinados no código. Em Sublinhado, é o titulo que aparecerá no Botão, se desejar também alterar, escolha o apropriado segundo você.

Se não alterar, o resultado é o da demonstração abaixo:


Até o próximo post gente ;D