Olá Galerinha, hoje eu vim com mais um código fantástico, desenvolvi agora a pouco uma nova caixa de busca, a novidade é que ela vem com a fantásticas tecnologia do HTML5 que permite que as buscas sejam feitas por voz também. A caixa de busca tem um estilo bem elegante e moderno, como já disse, faz buscas com a fala também, o botão de busca é bem simples e bonito. A Caixa de Busca não tem efeitos impressionantes, fiz algo leve, bonito e moderno, além de só carregar uma imagem (a do botão de buscar). Veja a Demonstração: http://demo3.blogandocomfacilidade.com/
Vamos ao Tutorial:
1º – Acesse o painel do seu Blog e clique na Guia Modelo.
2º – Em seguida segure as teclas CTRL+F e procure por:
]]></b:skin>3º – E ACIMA dela cole o seguinte código:
#busca-html5 {font-size: 13px;width: 80%;border: 1px solid #BFBFBF !important;margin: 0 0 0 0;padding: 5px 5px;height: 20px;
font: normal 100% Arial,Helvetica,sans-serif;color: #2f2f2f;background: #FAFAFA;float: left;border: none;display: inline;outline: none;}
input#buscar-busca-html5 {display: inline;margin: 0 0 0 0;height: 32px;width: 35px;border: 1px solid #4189C1 !important;color: white;border: none;cursor: pointer;margin-left: 8px !important;background: #58A9E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniNfzFTwigido1QHZw4aDka1mCV1vi9uA3ADs9alU122aRDEjTHTZCHtrgTcUnFX9qCU0NtA-V2d_9zqgrksiUjDkwXvNTNATL_w7TAjNB1PdTsOcNCXPpfjD7hYBquuTHkgJmLLe85Q/h80/buscar.png) 3px 2px no-repeat;text-indent: -9999px;}
input#buscar-busca-html5:active {background: #71b8ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniNfzFTwigido1QHZw4aDka1mCV1vi9uA3ADs9alU122aRDEjTHTZCHtrgTcUnFX9qCU0NtA-V2d_9zqgrksiUjDkwXvNTNATL_w7TAjNB1PdTsOcNCXPpfjD7hYBquuTHkgJmLLe85Q/h80/buscar.png) 3px 2px no-repeat;}4º – Em Seguida clique em Salvar Modelo.
5º – Depois clique na Guia Layout.
6º – Na lateral do seu Modelo, clique em Adicionar Gadget.
7º – Selecione o Gadget tipo “HTML/Javascript”,
8º – E no Conteúdo do Gadget, cole o seguinte código:
<div id="search"><form action="/search" id="form-busca" method="get">
<input id="busca-html5" name="q" type="text" value="" x-webkit-speech="true" />
<input id="buscar-busca-html5" type="submit" value="BUSCAR" /></form></div>9º – E por último, dê um título do seu gadget e clique em Salvar.
ATUALIZAÇÃO 04/10/2011:
A versão Agora funciona também no HTML do Blog, alteramos alguns códigos no Passo 8 e agora você pode adicionar também no modelo estático do seu template, basta apenas adicionar o código do passo 8 no local desejado de seu template.
A versão Agora funciona também no HTML do Blog, alteramos alguns códigos no Passo 8 e agora você pode adicionar também no modelo estático do seu template, basta apenas adicionar o código do passo 8 no local desejado de seu template.
Comentários