Como alterar as cores das Caixas de Pesquisas Personalizadas

Como Melhorar O Seu Blogger

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://consultascontabeis.blogspot.com/

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>

Espero que estas dicas tenham sido úteis para você!

Se precisar de uma ajuda extra, pode contar com a nossa assessoria profissional.

Assessoria Profissional para seu Blogger

Sueli Rocha Miranda