Caixa de pesquisa expansível no estilo Apple para blogs

Olá pessoal! Apresento-lhes uma caixa de busca muito estilosa e que deu bastante trabalho para fazer. Essa caixa de busca ele é expansível quando se clica nela, além dos efeitos gradientes, transition, e é claro, o estilo da Apple. Vamos ver como colocar esta caixa de busca em seu blog? Caso queira ver a demonstração, clique aqui.

1. Acesse a guia Modelo e clique no botão Editar HTML. Depois, pressione Ctrl+F para abrir o Localizador e procure pela linha abaixo.

]]></b:skin>

2. Imediatamente, cole o seguinte código acima da tag encontrada. Se você quiser fazer alterações pessoais na busca, fique a vontade.

#search {
}
#search input[type="text"] {
background: #7d7e7d;
background: -moz-linear-gradient(top,  #525252 0%, #333333 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#525252), color-stop(100%,#333333));
background: -webkit-linear-gradient(top,  #525252 0%,#333333 100%);
background: -o-linear-gradient(top,  #525252 0%,#333333 100%);
background: -ms-linear-gradient(top,  #525252 0%,#333333 100%);
background: linear-gradient(top,  #525252 0%,#333333 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#333333',GradientType=0 );
border: 1px solid #222;
font: normal 12px Helvetica Neue;
text-color: #FFFFFF;
height: 12px;
width: 120px;
padding: 6px 15px 6px 3px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
color: #000;
width: 200px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

3. Clique no botão Visualizar e se estiver tudo certo, clique no botão Salvar modelo.

4. Depois, acesse a guia Layout e escolha o local onde colocará a busca. Depois, clique no link Adicionar um gadget e cole o seguinte código na guia Conteúdo.

<form action="/search" id="search" method="get">

<input name="q" placeholder="Faça a sua busca" size="40" type="text" /></form>

Modifique a parte destacada de vermelho, por uma frase que queira que apareça dentro da caixa enquanto não for clicada.

5. Deia um nome à sua busca se preferir e clique no botão Salvar.

Tudo pronto, sua caixa de busca está colocada no seu blog. Uma caixa de busca bonito e estilosa que nunca "sai da moda", não é? Esta caixa de busca deu muito trabalho para ser criada, pois tive que fazer vários ajustes, colocar vários efeitos, e muito mais. Utilize os botões abaixo pra compartilhar o artigo e até a próxima!