Criar uma caixa de pesquisa personalizada para o blogger

Como deixar seu blog mais bonito!

É 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.

Super Dicas Blogger

Páginas