12 de set de 2012

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 essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

6 comentários

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

    ResponderExcluir
  2. ñ 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

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

    ResponderExcluir
    Respostas
    1. 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?

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

    ResponderExcluir

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!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo