Pesquise neste site

Como alterar as cores das Caixas de Pesquisas Personalizadas

Como alterar as cores das Caixas de Pesquisas Personalizadas

Como alterar as cores das Caixas de Pesquisas Personalizadas

Neste site nós oferecemos a você vários modelos de Caixas de Pesquisas Personalizadas, mas e se você quiser trocar as cores das fontes, do fundo da caixa de pesquisa, ou mesmo do :hover (aquilo que troca de cor, quando o apontamos com o mouse)?
É simples! Nos códigos que oferecemos das Caixas de Pesquisas Personalizadas, indicamos a que se refere cada item, então é só trocar o código da cor.

Os códigos das cores você encontra em:
https://www.flextool.com.br/tabela_cores.html

Você também pode pesquisar as cores em:
https://www.colorhexa.com/fa9ab3

Para criar uma Caixa de Pesquisa Personalizada:

Vá em “Layout”, clique em "Adicionar um Gadget" e procure pelo gadget "HTML/JavaScript".
Em "Título" digite o “Pesquisar”, ou o quê você quiser.
Agora copie o código que apresentamos em cada Caixa de Pesquisa e cole em “Conteúdo” do box "HTML/JavaScript ".

Como exemplo, dois sites que tem a mesma caixa de pesquisa, mas com cores diferentes (fica bem diferente mesmo, nem parece a mesma caixa de pesquisa!):

Vilinha Doces:

https://massasdocesesalgadoslapa.blogspot.com/

Consultas Contábeis:

https://www.consultascontabeis.com.br/


O código da Caixa de Pesquisa do site Vilinha Doces você encontra em:
https://comomelhoraroseublogger.blogspot.com/2016/01/aqui-tem-a-terceira-caixa-de-pesquisa-para-o-seu-Blogger.html

O código da Caixa de Pesquisa do site Consultas Contábeis é:

<style>
#ba-cuadrobusq .ba-textobusq {
border: 1px solid #DDD;/*--define a cor da borda--*/
box-sizing: border-box;
color: #000000; /*--define a cor da fonte--*/
font-family: 'Lora', serif;
font-size: 14px;
padding:9px;
width: 220px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
#ba-cuadrobusq .ba-textobusq:hover {
box-shadow:inset 1px 1px 8px gainsboro;
}
#ba-cuadrobusq .ba-textobusq:focus {
background-image: -webkit-linear-gradient(white,white);
background-image: -moz-linear-gradient(white,white);
background-image: -ms-linear-gradient(white,white);
background-image: -o-linear-gradient(white,white);
background-color:white;
outline:1px solid #00008B;
color: #000000;
font-style:normal;
box-shadow:inset 1px 1px 8px gainsboro;
border:1px solid #6959CD;
}
#ba-cuadrobusq .ba-enviar {
background:#00008B; /*--define a cor do botão Buscar--*/
border: 1px solid #E3E3D9;/*--define a cor da borda do botão Buscar--*/
color: white;
cursor: pointer;
font-family: 'Droid Sans', sans-serif !important;
color: #fff;
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}
#ba-cuadrobusq .ba-enviar:hover {
background:#6959CD; /*--define a cor do botão Buscar hover--*/
}
</style>
<form action="search/" id="ba-cuadrobusq">
   <input class="ba-textobusq" name="q" />
  <input class="ba-enviar" type="submit" value="Buscar" />
</form>


Comentários

Nossas fotos no Flickr (clique na setinha e boa viagem!)

Natureza

Postagens mais visitadas

SEO Básico - Como melhorar o desempenho do seu Blogger

Como inserir um favicon no Blogger

Como inserir Slides de Posts Recentes no Blogger (Responsivo)

Como bloquear a cópia do seu Blogger

Personalize a caixa de pesquisas no seu Blogger

Como personalizar a Página Inicial do Blogger

Melhorando o seu Blogger com os marcadores

Como importar uma foto do Flickr diretamente para o seu Blogger

Como configurar um domínio personalizado no Blogger

Qual o melhor site para baixar fontes grátis?