sexta-feira, 6 de janeiro de 2012

Caixa de pesquisa personalizada

390891_10150488713143915_161162533914_8902762_410067611_n_large

Nossa, como é difícil navegar em alguns blogs, né?
Então, eu vou dar uma dica para ajudar nessa navegação - uma caixa de pesquisa personalizada de rápida e fácil busca.
Como fazê-lá?
Vá em Design (ou em Layout), clique em adicionar um gadget Html/Javascript.
Clique para ler mais.

Dentro do gadget coloque o seguinte código:


<style type="text/css">
<!--
#barra-busca {
width: 270px; /*largura da imagem*/
height: 20px; /*altura da imagem*/

background-image: url(IMAGEM 1);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 20px; /*altura da caixa de texto*/
width: 200px; /*largura da caixa de texto*/
margin-top: 10px; /*posição em relação ao topo*/
margin-left: 10px; /*posição em relação á esquerda*/
color: #FF69B4; /*cor do texto*/
border: 1px solid #E8E8E8; /*cor da borda*/
float: left;
padding: 2px;
background-color: #FFFFFF; /*cor do fundo*/
}
#form-busca #bt-busca {
height: 32px; /*altura da imagem*/
width: 32px; /*largura da imagem*/

background-image: url(IMAGEM 2);
border: none;
margin-top: 3px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 15px;
}
-->
</style>
<div id="barra-busca">
<form id="form-busca" method=get action="URLDOSEUBLOG/search"><input id="sprocura" type=text name=q maxlength=255 value="PERGUNTA" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="NOME DO BLOG" /><input type="hidden" name="sitesearch" value="URL DO SEU BLOG" /></form></div>


Agora, vou explicar tudinho para vocês poderem personalizar a caixa.

- Em IMAGEM 1, você coloca o background da sua caixinha.
- Em IMAGEM 2, você vai colocar o url do botão de busca.
- Em PPERGUNTA, você coloca a pergunta que vai ficar dentro da sua caixinha. Exemplo: "O que você procura?". Se quiser que não apareça a pergunta, apenas apague "PERGUNTA" (sério?)

Outras coisas já estão explicadas dentro do código.
Espero que tenha ajudado.

Beijos,
Ana Lola.

Obs.: Tutorial retirado do Débora Morais e do Go Imagine

0 comentários:

| By Ana Lola | Somente para o Sweet Pink | Proibida Cópia © |