Há algum tempo postei sobre como usar a pesquisa personalizada do Google. A caixinha já fica como a gente quer, com cores e estilo para a janela de resultados definidos por você. Para deixá-la ainda mais fofa você pode usar imagens como planos de fundo, mudar o ícone de pesquisa do botão, mudar cores e tipo de fontes, tudo isso usando css, que nem fiz com a minha ali na sidebar (e na imagem acima) e é o que vou mostrar nesse post.
1. Depois de ter configurado e personalizado sua caixa de pesquisa (conforme mostrei aqui), obtenha o código (Aparência - Salvar e obter código) e cole no layout do seu blog em um novo gadget html/javascript. Salve e veja se está funcionando direitinho.
2. Abra o gadget html/javascript em que salvou a caixinha. Acima do código dela, cole isso:
<style>
/* área geral da caixa de pesquisa */
.gsc-control-cse{
border-color: transparent;
background-color: #fee;
border-radius: 20px;
height: 95px;
width: 295px;
background-image: url(URL-DA-IMAGEM-DE-FUNDO);
background-position: right;
background-size: 100%;
}
/* botão que clica para pesquisar */
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
width: 70px !important;
height: 26px;
}
/* área em que vai o texto da pesquisa */
.gsc-search-box {
margin-top: -5px;
margin-right: 0;
margin-bottom: 4px;
margin-left: 0;
width: 270px;
}
/* área em que vai o texto da pesquisa */
.gsc-input-box {
background: transparent;
width: 170px;
height: 30px;
font-family: delius !important;
margin-top: 10px;
color: #c4a2cc;
}
/* ícone do botão que clica para pesquisar */
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
border-color: transparent;
background-image: url(URL-DA-IMAGEM-DO-BOTAO);
filter: none;
background-repeat: no-repeat;
background-color: transparent;
}
.gsc-search-button-v2 svg {
fill: #d489ae;
margin-left: 5px;
margin-top: -100px;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: transparent;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
padding-right: 42px;
}
</style>
O código foi feito com base no que uso atualmente; eu o fiz para uso pessoal, na tentativa e erro até acertar do jeito que queria, portanto, talvez você precise acrescentar algo ou remover conforme o que desejar ok? Basicamente cada trechinho quer dizer...
.gsc-control-cse = refere-se à toda área da caixa de pesquisa; eu tirei a cor da borda (border-color) deixando transparente, arredondei a borda (border-radius), mudei a cor de fundo (background-color), caso queira usar só cor, dá certo, ou uma imagem em png junto com a cor também combina; a imagem de fundo (background-image), que uso é um gif (veja na tag gifs aqui do blog), lá no código substitua URL-DA-IMAGEM-DE-FUNDO pelo link de alguma imagem de sua preferência e altere os valores de height (altura) e width (largura), de acordo com a imagem. Alinhei a imagem à direita (background-position: right) e o tamanho (background-size) deixei em 100% para cobrir a área toda.
.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus = é o botãozinho que clica para pesquisar, defina largura e altura de acordo com a imagem que usar lá em URL-DA-IMAGEM-DO-BOTÃO ou o que preferir. Nesse caso, defini que a imagem (a flor rosa da caixinha de pesquisa que tô usando), não ia se repetir (background-repeat: no-repeat) e por usar uma imagem em png, deixei a cor do background transparente.
.gsc-search-box = lugar em que você digita o que quer pesquisar. Margin top, bottom, left, right é para posicionar a área mais para cima, para baixo, esquerda ou direita; width é a largura.
.gsc-input-box = ainda é onde você digita a pesquisa, mas aqui você define fonte, cor da fonte e fiz alguns ajustes para posicionar direitinho na minha caixinha.
.gsc-search-button-v2 svg = ícone de pesquisar (lupa); posicione com margin e mude a cor em fill: #d489ae.
.gsc-search-box-tools .gsc-search-box .gsc-input = a área em que digita a pesquisa fica maior ou menor conforme o valor de padding-right.
Salve e veja como ficou. Para que veja os resultados antes de aplicar ao blog, use um editor html como os desse post. E é isso :3
0 Comentários
Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.
Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.
Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.
Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart