Caixa de Pesquisa Personalizada Para Bogger/BogSpot 0

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:

HTML

/* 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.

HTML

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

Até a próxima!

Fontes: Blogger na Web