MASIGNCLEAN101

Caixa de busca Elegante Blogger

Ter uma caixa de pesquisa em seu site é muito importante, pois faz com que o visitante que já está lendo algum conteúdo em seu site, procure mais informação em seu próprio site ao invés de buscar o que quer em outro site. Alem disso, temos que ter em mente que temos que oferecer o melhor conforto e facilidade aos leitores do blog.

A caixa de busca que vou compartilhar hoje, tem um design simples, porém muito elegante, o que dá ao seu blog um aspecto muito profissional. O código traz ainda muita facilidade para que você possa trocar as cores e até seu tamanho para que se adapte ao modelo de seu site/blog.

Caixa de busca elegante

Vamos ao passo a passo:

Caixa de busca elegante no blogger

1. Acesse o painel do seu blog
2. Clique na guia "Layout"
3. Clique em 'Adicionar um gadget' → Escolha tipo'HTML/Javascript' e cole o código abaixo:


<!—Caixa de busca elegante By http://www.dicasblogger.org/ -->
<style>#search    {float:right; height: 30px; margin:10px 0 0 0; }
#search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#search input.field:focus {background-position:top right; background-repeat:no-repeat;}
#search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;}
#search input.field {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;}
#search input.field:focus {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png); background-color:#404040;}
#search input.submit {background-color:#b60002; color:#fff;}</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter keywords..'/>
<input class='submit' name='submit' type='submit' value='Buscar'/></div>
</form>
</div>


Altere as cores conforme o desejado, se você não lembrar ou conhecer códigos de cores, dê uma olhadinha nesse post que pode ajudá-lo.

Espero que tenham gostado! Qualquer dúvida, deixe seu comentário.

Compartilhe esse artigo!
Unknown
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

valeu ajudou muito,e gostei muito dessa página de pesquisa

24 de março de 2013 18:32
avatar

ñ consegui diminuir a caixa para q ficasse do tamanho adequado para meu blog, diminui o width: 160px; para 100 mais mesmo assim o canto direito da caixa fica um espaço em branco q faz parte das bordas... pode me ajudar? vlw

14 de maio de 2013 14:36
avatar

Testei este modelo e alguns de outros sites, mas não permite que digite na na caixa, sabe o que pode estar acontecendo?

18 de maio de 2013 18:15
avatar

Isso pode estar sendo causado por alguma interferência de um template personalizado... Já tentou instalar a caixa de busca padrão do blogger (aquela simples da Google) em seu blog, para ver se o problema persiste?

18 de maio de 2013 22:13
avatar

Aqui funcionou perfeitamente obrigado, estava atrás de um tutorial como esse...

24 de maio de 2013 11:10
Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!