Criar uma caixa de pesquisa personalizada para o blogger

 Como deixar seu blog mais bonito!


caixa de pesquisa personalizada
 
É muito fácil deixar sua caixa de pesquisa estilizada, você pode mudar as cores das partes da caixa e deixá-la do seu jeito.

 

Insira o código no blog:


Vá em 'modelo' e 'personalizar', abrirá o editor, vá em 'avançado' e 'adicionar css', cole o código abaixo e salve.
 
.gsc-branding-text, .gsc-branding-img-noclear {display:none;}
 /* TEXTO */
 td.gsc-input input {border: 2px solid #e7e7e7; background:#fff; color:#ff0048; font-family:verdana; font-size:11px; } /* Fim do texto */
 /*BOTÃO*/
 input.gsc-search-button {font-family:'trebuchet ms'; font-size:14px; color:#fff; background:#ff0048; border:0px; font-weight:normal;  -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
 input.gsc-search-button:hover {background:#b779db; color:#fff;}
 /*fim do botão*/

Entendendo o código:

border: borda do campo de texto, a largura da borda é medida em px, quanto mais px maior será a borda
background: cor do fundo - Escolha uma cor - copie e substitua no código (exemplo: #00ee99)
font-family: tipo de fonte usada no texto
font-size: tamanho da fonte
color: cor da fonte - Escolha uma cor - copie e substitua no código (exemplo: #00ee99)
border-radius: borda arredondada

Assine nossa newsletter e seja avisado por e-mail de novos posts.

Nenhum comentário:

Postar um comentário