Caixa de pesquisa personalizada

Já que o blogger só fornece um modelo de caixa de pesquisa, andei pesquisando algum tutorial que ensine a fazer uma personalizada. Acabei encontrando no Other Things - Attitude Included, então hoje vou ensinar á vocês como fazer, confira!:

found on http://hellovit.tumblr.com/post/1288237386

1) Vá no Painel do Blogger > Layout e cole o código abaixo em um HTML/JavaScript (não altere nada!)

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>

2) Vá em Modelo > Editar HTML > Ctrl + F e procure por:

]]></b:skin>

3) Adicione o código abaixo acima do código encontrado, e faça as alterações onde está indicado:

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px; /* Altura da caixa de pesquisa */
width: 140px; /* Largura da caixa de pesquisa */
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da caixa de pesquisa */
}
.searchbut{
background: url('url da imagem do botão de pesquisa');
width:30px; * Largura do botão pesquisa */
height:30px; /* Altura do botão de pesquisa */
border: 0;
padding:7px;
}

Espero que tenham gostado do tutorial, se quiserem pedir algum, fiquem á vontade. Beijos!

Caixa de pesquisa personalizada

16 comentários

Categorias

Buscar

Publicidade

Facebook

Receba as novidades

Pinterest

Instagram @maisbelablog