Caixa de pesquisa personalizada

26/12/2012

Já que o blogger só fornece um modelo de caixa de pesquisa, andei pesquisando algum tutorial que ensine a fazer uma personalizada. Acabei encontrando no Other Things - Attitude Included, então hoje vou ensinar á vocês como fazer, confira!:


1) Vá no Painel do Blogger > Layout e cole o código abaixo em um HTML/JavaScript (não altere nada!)
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
 2) Vá em Modelo > Editar HTML > Ctrl + F e procure por:
]]></b:skin>
3) Adicione o código abaixo acima do código encontrado, e faça as alterações onde está indicado:
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px; /* Altura da caixa de pesquisa */
width: 140px; /* Largura da caixa de pesquisa */
color: #FF82AB; /* Cor da fonte  */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo da caixa de pesquisa */
}
.searchbut{
background: url('url da imagem do botão de pesquisa');
width:30px; * Largura do botão pesquisa */
height:30px; /* Altura do botão de pesquisa */
border: 0;
padding:7px;
}
Espero que tenham gostado do tutorial, se quiserem pedir algum, fiquem á vontade. Beijos!

16 comentários:

  1. tbm ñ gosto da caixa d pesqusa do blog, personakizei tbm {=
    fashionemcores

    ResponderExcluir
    Respostas
    1. O blogger deveria disponibilizar mais modelos né.

      Excluir
  2. Olá, tudo bem?

    Adorei o seu blog, eu comecei o meu hoje e gostaria que você desse uma olhada.

    http://frenesidaspalavras.blogspot.com.br/

    beijos.

    ResponderExcluir
  3. AAh, muito bom o tutorial..e por coincidência, eu tbm encontrei minha caixinha de pesquisa lá no Atittude Includes, acredita?! Adooro aquele blog, pena que pararam de atualizar...=*

    Beeijos
    www.blogmymemories.com

    ResponderExcluir
    Respostas
    1. Pois é, eu também adorava os tutoriais de lá.

      Excluir
  4. Já conheço o tutorial ! ele é bem útil e está muito bem explicado flor ! adorei

    siteiloveit.blogspot.pt

    ResponderExcluir
  5. A caixa de pesquisa "normal" do blogger é tão feinha né? haha
    Seu tuto foi ótimo s2

    ResponderExcluir
  6. Super legal o resultado, adoro personalizar, rs.

    Beijos, Kawanny Arruda.

    ResponderExcluir
  7. Ahhh, é igual a do meu blog
    Bjokas

    minhamaniaa.blogspot.com.br

    ResponderExcluir
  8. Adorei o tutorial, já estou usando no meu blog :D

    Beijo!
    www.blog-madeinparadise.blogspot.com << blog novo! confere!

    ResponderExcluir