26 de março de 2010

Crie uma caixa de pesquisa personalizada para o seu blog


Os blogs que são hospedados na plataforma Blogger/Blogspot têm, de forma padronizada, uma caixa de pesquisa interna, que pode ser inserida facilmente na sidebar, ou em qualquer outro local do blog, se o administrador assim desejar. Entretanto, não é possível personalizá-la ou alterá-la. Neste post vamos aprender a criar uma caixa de pesquisa que pode ser modificada conforme o design do seu blog.

Apenas para exemplificar, neste post vamos colocar a caixa de pesquisa no topo da sidebar, conforme pode ser visto neste meu outro blog. Entretanto, este recurso pode ser colocado em qualquer local do blog.

Sempre bom lembrar que antes de começar, salve as configurações do seu template para se evitar dor de cabeça caso algo dê errado.

1ª Parte - Configurando o código CSS

O primeiro passo a ser feito é adicionar o código CSS que irá compor nossa caixa de pesquisa. Tal código permitirá que sejam feitas modificações nas cores de fundo e bordas, largura e margens da nossa caixa.

Entre na sua conta do Blogger → Painel → Layout → Editar HTML. Com o auxílio do Crtl+F, encontre a tag ]]></b:skin> e cole acima dela o código abaixo:
/* Search.
main-wrapper:
#search form {
border:1px solid #999999;
background:#E5E5E5;
padding:10px;
margin:0 10px 15px;
position:relative;
}

.searchtext {
padding:2px 5px;
color:#999;
font-size:11px;
line-height:15px;
height:15px;
width:87%;
border:2px solid #BBDAFD;
}

.searchsubmit {
position:absolute;
right:10px;
top:10px;
}
Cada bloco de código acima refere-se a uma parte de nossa caixa de pesquisa. No primeiro bloco podemos personalizar as dimensões gerais da caixa, a cor do plano de fundo e as suas margens. No segundo bloco temos as configurações referentes ao texto para se fazer a pesquisa. No terceiro bloco encontramos as configurações do botão de pesquisa.

Cada um deles pode ser configurado de acordo com a vontade do administrador blog.

2ª Parte: Estruturando o código Html/Xml

Agora, para a criação desta caixa de pesquisa teremos utilizar códigos de HTML/XML, isso irá permitir que organizemos a estrutura da caixa como se fosse um formulário, ou seja, com entradas e saídas de dados referentes ao blog e, assim, conseguir uma busca bem-sucedida.

Com ajuda do Ctrl+F, encontre o trecho <div id='sidebar-wrapper'> e cole acima dele, o código abaixo.
<div id='search'>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform' method='get'>
<div>
<input class='searchtext' id='q' name='q' type='text'/>
<input class='searchsubmit' type='image' name='submit' src='http://bloggernaweb.webs.com/icon_search.gif'/>
</div>
</form>
</div>
Observações:
- O primeiro "input", refere-se a caixa de texto no qual o visitante irá digitar o que desejar procurar no blog.
- O segundo "input", refere-se ao botão de envio, é por meio dele que a consulta é submetida ao primeiro "input". O que está em vermelho é uma imagem para ser usada como botão de envio. Caso deseje outra imagem, recomendo o site Icon Archive.

Clique em visualizar. Se tudo estiver certo, você verá na sua sidebar uma caixa de pesquisa semelhante a esta que está logo abaixo.


Salve. Agora, você pode personaliza-la como quiser.

É isso. Até a próxima!

Via: Blog Btamplates

17 comentários:

  1. Olá, Idenaldo!

    Que bom vê-lo de volta aqui!

    A caixa de procura é essencial para todo blog - e mesmo assim vejo muitos que não a tem. Seu post é ótimo por ensinar como criar uma caixa personalizada.

    Outra boa opção é o gadget do próprio Google, que também faz a pesquisa no blog.

    Um abraço e parabéns pelo artigo!

    Adelson (Gerenciando Blog)

    ResponderExcluir
  2. @adelson, obrigado pelas palavras. Sabe que o admiro muito e ter sua presença aqui no blog é sempre sinônimo de grande satisfação.

    Grande abraço.

    @ryoko, só poderei ajudar se dizer o que acontece, pois testei este gadget em vários blogs diferenes e deu certo.

    ResponderExcluir
  3. Ótimo post!
    Sugiro que ative a opção "Nome/URL", pois ela é mais prática que o "Open ID".
    Abraço!

    ResponderExcluir
  4. Obrigado pela dica, Victor, mas eu prefiro o "Open ID". ;-)

    ResponderExcluir
  5. Como coloca um testo dentro da caixinha?
    Tipo assim buscar filme etc!!!
    Aguardo resp,abç e valeu pelo post...
    Ah mais coisinha e se eu quiser coloca a caixinha de busca em outro lugar sem ser encima como faço isso tbm?

    ResponderExcluir
  6. Beleza de artigo, como sempre, Parabéns Idenaldo,
    grande abraço,

    ResponderExcluir
  7. Muito Bom!
    Parabéns!
    www.clubedaeducacao.com.br

    ResponderExcluir
  8. Ola amigo, obrigado pelas dicas, mas editando este blog eu preciso agora descer um pouco a caixinha de pesquisa. Ela fica colada no teto da "navbar", não adianta mudar os valores de margin ou padding nessa primeira parte do codigo (/* Search. main-wrapper...) ela não se mexe. O que eu tenho que fazer?
    Desde já agradeço a atenção.

    ResponderExcluir
  9. Deduzo que tem algum outro importante projeto rolando aí Idenaldo,
    mas podia largar uma dica pra gente aí, daquelas que só vc sabe mandar...
    :D

    Grande abraço do seu leitor,

    ResponderExcluir
  10. caro amigo tomei a liberdade de colocar seu banner na minha página. sou novo nos blogs mas estou encarando com seriedade por que estou escrevendo sobre algo q adoro qu é o cinema, se puder me fazer uma visita ficarei grato

    ResponderExcluir
  11. Muito Obrigado pela Ajuda
    Coloquei no meu site e deu tudo certo
    Obrigado Mesmo
    www.emvhdvideos.com/

    ResponderExcluir
  12. Idenaldo não funcionou a segunda parte pois não encontrei o segundo trecho no código do blog.

    ResponderExcluir
  13. caro, tô muito afim de colocar essa caixinha no meu site, porém não consigo achar esse 2º código o outro consegui normal, mas na hr de procurar por este não consegui, ajude-me. grata

    ResponderExcluir
  14. Adorei o tutorial, me ajudou muito. Obg ^^

    ResponderExcluir
  15. nao achei o trecho < id='sidebar-wrapper'>

    ResponderExcluir
  16. Olá, finalmente encontrei o que tanto procurava!
    Instalei o "buscador" e troquei o ícone, mas a parte de estilo não funciona. Snif.. Conferi para ver se havia colocado acima da tal tag e está lá, certinho. Mas não resulta, por exemplo, a cor de fundo desejada, etc... Será que poderia me dar uma dica do que fazer?
    Abraço...

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.