Caixa de pesquisa expansível no estilo Apple para blogs

Compartilhar:
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 gradientestransition, 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!
► Postagens Relacionadas:

8 Comentários

Adriano Carvalho disse...

Muito obrigado, gostei bastante

31 de maio de 2012 20:07
João Almeida disse...

Fico feliz que tenha gostado Adriano. Fique sempre atento aqui no Categoria Blogger!

31 de maio de 2012 22:47
Matheus Amorim disse...

Olá João. Coloquei em meu blog, como foi dito passo-a-passo. Mas, queria saber se tem que adicionar alguma biblioteca de Jquery, entre outras. Pois a barra não trouxe o efeito, como na demostração. Agradeço pela atenção.

Obs.: Eu acabei de criar um novo blog...

1 de setembro de 2012 17:28
João Almeida disse...

A caixa não pode ser utilizada com JQuery. Com qual navegador você utilizou na inserção do gadget?

1 de setembro de 2012 17:57
Anônimo disse...

Muito bom cara! Só com a base desse código eu faço ficar idêntico ao da apple =). Você é um gênio!

16 de abril de 2013 21:09
Peterson Silva disse...

Muito boa essa caixa, totalmente personalizável. Valeu mesmo brother!

23 de setembro de 2013 04:55
João Almeida disse...

Sim! E o código é de fácil compreensão, o que faz você modificá-la de forma fácil! Eu que agradeço por ter gostado do post! =D

23 de setembro de 2013 14:03
Bruno Bezerra disse...

Fala João!, Esta caixa de pesquisa cai bem em blogs/sites de tecnologia!.

15 de março de 2014 12:57

Postar um comentário