Inserindo a caixa de Busca

Encontrei esta caixa de busca que pode ser personalizada de diferentes formas, ela é muito útil e funciona muito bem, além disso, ela também tem o recurso de reconhecimento de fala.



                                              

Encontrei o código HTML no site Tecnoblog. Criei um código css para esta caixa de busca que da a ela um efeito hover e bordas arredondadas. Aqui no blog, eu uso uma caixa de busca como esta (no navbar do blog).é bem simples de instalar, então vamos lá…

                                            

                                           

[exemplo da caixa de busca aqui]

1) Entre no painel do blog ► Layolt ►Adicionar um Gadget

clique em HTML/JavaScript

  

2) Ira aparecer uma pagina assim: 

  

No campo titulo: Escreva o nome do seu Gadget.

No campo Conteudo: Coloque 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="" /></form></div>

Não precisa alterar nada neste código.

Clique em salvar. Por enquanto você verá apenas uma barrinha branca com um pontinho do lado direito.

 Agora, para que a caixa de busca comesse a ganhar aparência, siga os próximos passos… 

3) Entre no painel do blog ► Modelo ► Editar HTML.

Procure por ]]></b:skin>

Acima dela cole o seguinte código CSS:

/* caixa de Busca

------------------------------------------------*/

#busca-html5{/*Campo de Busca*/

font-size: 13px;

width: 30%;

border:1px solid #ccc !important;

border-radius:30px;

margin: 0px;

padding: 5px 5px;

height: 20px;

font: arial;

color: #ecc5c7;

background: #FCFCFC;

float:left;

border:none;

display: inline;

outline: none;

}

input#buscar-busca-html5{/*Botão de Busca*/

display: inline;

margin: 0 0 0 0;

height: 32px;

width: 35px;

border: 0px solid #4189C1 !important;

border-radius:10px;

color: white;

border: none;

cursor: pointer;

margin-left: 8px !important;

background: #39C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHYwEgriy75CU3SPKoq3IyMKjz-_ZrujFi2eOIwHEt122hOnOp1cYl7l7aWHKKWEGRlVkiZkh_-T1Es-TB9ZhCoNfAUgiFd8f9OHGwgmDqTePOfLBeaxN425ltX8Kl_bxNquVb8FHdCk/h80/buscar.png) 3px 2px no-repeat;

text-indent: -9999px;

}

input#buscar-busca-html5:hover{/*Botão de Busca hover*/

background: #36C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaHYwEgriy75CU3SPKoq3IyMKjz-_ZrujFi2eOIwHEt122hOnOp1cYl7l7aWHKKWEGRlVkiZkh_-T1Es-TB9ZhCoNfAUgiFd8f9OHGwgmDqTePOfLBeaxN425ltX8Kl_bxNquVb8FHdCk/h80/buscar.png) 3px 2px no-repeat;

-webkit-transition: 0.6s;

}

Os trechos que podem ser alterados estão destacados.

★ = Tipo e cor da fonte do campo (onde  escreve para fazer a pesquisa).

★ =   Cor de fundo do campo.

★ = Cor de fundo do botão de envio.

★ = Cor de fundo do botão de envio hover (quando o ponteiro do mouse estiver sobre ele)

★ = Url da imagem do botão de envio (não é necessário edita-la, a que eu uso aqui no blog continua sendo a mesma)

★ =  Este comando dá o efeito de lentidão no hover do botão, se não quiser apague este trecho!Com Cuidado para não apagar mais nada!