03/03/2013

Personalizar caixa de pesquisa


Boa tarde, leitores.
Ontem não postei, pois fui ao cinema com alguns amigos assistir dezesseis luas, estava muito na expectativa  por esse filme, não havia lido o livro, mas uma das pessoas que foram comigo sim, disse que era muito interessante. Mas como explicar quanta decepção? O filme me provocou sono do início até o fim, a única parte que realmente achei interessante ocorreu nos últimos 10 minutos de filme.
Decepções a parte, já tem mais de uma semana que me pediram alguns tutoriais, já era para ter postado, mas deu erro ao salvar aí perdi a postagem inteira, hoje resolvi postar o mais simples, já que eu deixei minhas lições de casa para última hora e tenho que fazê-las ainda.
O tutorial peguei no CB de como personalizar a caixa de pesquisa.
1. Crie um gadget HTML/Javascript com este código:

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" placeholder='Digite o que procura' type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
Você pode substituir  Digite o que procura  pela frase que desejar.
2. Vá em editar HTML, procure por ]]></b:skin> e acima dele cole este código:
.search{

float: left;
font-family: Century Gothic !important; /* Fonte do campo de texto*/
}
.searchbar{
height: 20px; /*Altura da caixa*/
width: 190px; /*largura da caixa*/
border-radius:15px;
background:#fff;
text-align:center;
color:#ff048c !important; /*cor do texto*/
font: 12px Century Gothic !important; /*fonte do texto*/
}
.searchbut{
background: url('Url da imagem do botão');
width:30px; /*Largura do botão*/
height:30px; /*altura do botão*/
border: 0;
padding:7px;
}
É só personalizar como quiser.
MetalKisses.

4 comentários:

  1. ownnnn ameiiiii o/
    eu tava um dia desses procurando esse tuto e quando fui fazer, o codigo tava dando erro! vou tentar esse aqui!
    acervo-de-livros.blogspot.com

    ResponderExcluir
    Respostas
    1. Vai dar certo, foi com esse tuto que eu personalizei a daqui do blog.

      Excluir
  2. Ameeei o tutorial,estava mesmo precisando u.u
    Estou seguindo segue de volta por favor ? Obrigada desde já.
    BEEEIJOS
    http://princesas-de-all-star-official.blogspot.com.br/

    ResponderExcluir

- Não estou aceitando tags ou selinhos.
- Use os comentários ou a ask para fazer requests.
- Respondo todos os comentários e retribuo na maioria das vezes.
- "Seguindo! Segue de volta?" Depende, se você já tiver seguido realmente e eu gostar do seu blog.