1 de fev de 2013

Colocando caixa de busca


Olá diamantes! Desculpem ter desaparecido, estava na semana de testes.

Hoje trago um tutorial para criar uma caixa de busca. É muito útil, se o seu leitor precisar de pesquisar algo, escreve na caixa e aparece umas postagens a ver com o assunto. Créditos ao Jackie Dream.

A caixinha ficará assim :

Vá no html e cole o código acima de ]]></b:skin>

.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Tahoma, Tahoma; /* Fonte */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;
background: #FFF; /* Cor de fundo da parte onde escrevemos */
}
.searchbut{
background: url('http://i39.tinypic.com/25ezh8z.png'); /* Link da imagem do botão de pesquisar*/
width:30px;
height:30px;
border: 0;
padding:7px;
}

Depois, cole este código em um gadget html/javascript

<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>


Personalize como quiser! Beijos, até ao próximo post.



16 comentários:

  1. Nahim...seus tutorias são maravilhosos. Por isso que amo esse blog!
    Beijos!
    Paloma Viricio- Jornalismo na Alma

    ResponderExcluir
  2. MUito bom o tutorial :)
    http://manguitarosa.blogspot.com.br/
    beijoos

    ResponderExcluir
  3. Hello.
    Adorei o post *--*
    Fofa ,la no meu blog tem uma tag pra voce. Vai la ver.
    http://senhorita-liberdade-glitter.blogspot.com.br/2013/02/nova-tag.html

    Beijos .

    ResponderExcluir
  4. Ótimo goodia, adorei super.
    Beijos!
    www.sweetbleeding.blogspot.com

    ResponderExcluir
  5. Ótimo tuto *-*
    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  6. Adorei o tutorial, uso um lá no blog só que o modelo é diferente ^^
    Beijocas!

    PiinkCookie.blogspot.com

    ResponderExcluir
  7. que f´´ofisa, acho otimo vc dizer como ficara pq a maioria nu coloca isso like!
    lamourmonage.blogspot.com

    ResponderExcluir
  8. Ótimo tutorial!
    Ótimo Post!
    Beijokaas da Nath

    http://mundofantasticofeminino.blogspot.com.br/

    ResponderExcluir
  9. Ameii o tutorial gostii mesmo *-*
    adotadospelopai.com.br

    ResponderExcluir
  10. flor super amei seu blog, parabéns, amei tudo mesmo de coração

    super útil o tutorial

    estou te seguindo se puder seguir de volta serei grata

    http://alinewdesigner.blogspot.com.br/

    ResponderExcluir
  11. Super legal, geralmente nos meus lays eu não coloco, mas dessa vez eu vou tentar colocar para vê se fica legal! ADORO os seus tutoriais são muito uteis para mim :D
    OBG,
    Beijinhos Emilia.

    coffemilia.blogspot.com ♥

    ResponderExcluir
  12. Oi amor, eu gosto muito desse tutorial :) estou voltando com o blog, obrigada por não me tirar da elite :) Beijos

    Cherry Of Shine

    ResponderExcluir
  13. Já conhecia o tuto e é muito util, porque aquela caixinha do blogger é feia kkkkk
    Beijinhos
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  14. Aceita afiliação?
    entresonhoseencontros.blogspot...
    Beiju

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.