Como colocar barra de pesquisa personalizada no blog + Vote!


Oii fofuxinhos >.< Hoje a pedido da Rafaela eu vou fazer um tuto de como colocar uma barra de pesquisa personalizada no blog. É bem fácil, simples e curto... Então nada de enrolação, vamos lá.

Vá em Elementos da página no seu blog e adicione um gadget Html / Java Script, dentro dele cole o código a seguir:

<form action="/search" class="search" method="get">
Search: <input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
Nele você não pode modificar nada, a não ser que não queira que a palavra "Search" fique ao lado da barra de pesquisa. Neste caso apague o que está em vermelho!

Agora vá no html do seu blog e procure pela tag: ]]></b:skin> 
ACIMA dela cole o código a seguir:
.search{
float: left; /* Flutuando a esquerda, poderá também mudar para Right (Direita) e Left (Esquerda) */
font-family: Georgia, Tahoma; /* Fonte da letra que será escrita quando procurarmos por algo */
}
.searchbar{
height: 20px;
width: 140px;
color: #FF82AB; /* Cor da fonte da letra que será escrita quando procurarmos por algo */
-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://cdn1.iconfinder.com/data/icons/Snow/Snow/snow/Search.png'); /* Link/Url da imagem do botão de pesquisar | tamanho: 30 x 30px */
width:30px;
height:30px;
border: 0;
padding:7px;
}
Se não quiser que as bordas dá parte onde escrevemos fique redonda retire tudo que está em vinho.

Conseguiram fazer o tutorial? Dúvidas?
Votaram? Comente! Beijos e até amanhã

Comente usando seu facebook!


Comente!

  1. amei o tuto, que pena que as vagas esgotaram, deixa pra proxima então ! bjs

    ResponderExcluir
  2. A flor muito obrigada pelo tutorial , estava precisando -rs- !
    Bj,
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  3. favoritei! hahahah :)
    Vou usar no próximo lay ou então dar um jeito de colocar neste mesmo :)
    beeijos,
    theattitudeincluded.blogspot.com
    Ps: Boaa sorte no concurso *u*

    ResponderExcluir
  4. Precisava mesmo disso amiga! Vou fazer depois, e já votei em você *_*

    Beijos, Emily
    Place Fame | Extras | Twitter

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Já votei em você! Flor, vota no Paraíso de Menina?

    http://theattitudeincluded.blogspot.com/2011/08/votacoes-abertas.html

    Besos,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  7. heeey , você entrou na lista dos blogs do Teenager in Need.
    pegue o seu award . *-*
    beijinhos , teenagerin-need.blogspot.com

    ResponderExcluir
  8. Atah, me desculpa, devo ter me confundido.
    Ou talvez o blog aprendeu aqui né, vai saber! :P
    kissus

    http://adoleser-girls.blogspot.com/

    ResponderExcluir
  9. Adorei o post!
    Já votei aqui no blog.
    bjs
    charmofpink.blogspot.com

    ResponderExcluir
  10. amei o post! estou fazendo uma pesquisa para um debate e queria sua opinião sobre plágio. por favor me envie um email dizendo o que você acha do assunto:
    gabi.patinacao@gmail.com
    beijos,
    trechygirltutoriais.blogspot.com

    ResponderExcluir
  11. oi flor adorei seu blog!!
    to seguindo segue de volta ta!!!
    http://spaceteen-chris.blogspot.com/
    beijos!!

    ResponderExcluir
  12. Oi! Seu blog foi escolhido para ser a primeira edição da Tag "Destaque do Mês".Como não vi uma página de contato, se aceitar, deixe um comentário lá no AS com seu Email o mais rápido possível ,rsrs , que te mandarei 5 perguntas para serem respondidas.
    Aguardo a resposta.
    kissus ;*

    http://adoleser-girls.blogspot.com/

    ResponderExcluir
  13. Oi flor! Amei o blog,to seguindo,segue de volta? acc afiliação?
    Beijos
    www.secretsofmylifes.blogspot.com

    ResponderExcluir
  14. Adorei o post. Acabei de trocar a barra de pesquisa lá do blog, depois de muito tempo desejando uma dessas bem bonitinhas. Muito obrigada, fofa. Seu blog é ótimo!

    Beijo
    http://www.garotasdizem.com/

    ResponderExcluir
  15. ótimo tuto!
    :a
    Visita??http://justadream20.blogspot.com.br/
    Seu blog é mtu lindo e vc é uma ótima blogueira!

    ResponderExcluir
  16. Ameei o tuto, ficou muito legal lá no meu blog! :3

    http://merry--heart.blogspot.com.br/

    ResponderExcluir
  17. po vlw foi o unico tutorial que funcione


    http://kingfas.blogspot.com.br/

    ResponderExcluir
  18. visitem meu blog
    http://www.donugblog.blogspot.com

    nele tem tv online tem jogos dowloads tem cds para baixar se vc quiser eu dou os codigos de tudo ou me add no facebook peketinho100_zikka@hotmail.com

    ResponderExcluir
  19. Adorei o tutorial me ajudou muito!
    *----*
    Obrigado!

    ResponderExcluir
  20. Muito bom o blog,meu amigo que recomendo,ai vir conferir e eu vou recomendar tb,e acompanha..me recomendaro esse site de rastreamento pois eu tava precisa http://rastreamentodecelular.net sera que é bom? rsrsrsrs abraços..parabens pelo blog

    ResponderExcluir
  21. Ficou horrível apareceu pesquisar e um código gigante em baixo

    ResponderExcluir
  22. Muito Obrigada!!!

    Deu certinho!!

    Eu consigo alterar a cor da borda? Está azul e eu gostaria de amarela.

    Obrigada!

    Lari

    http://coisasdacasaedavida.blogspot.com.br/

    ResponderExcluir
  23. Oii ensina a fazer a barra de pesquisa desse site:
    http://www.thalitamakes.com.br/

    Faça a pesquisa de uma palavra lá e você vai ver o que há de diferente no blog. Eu pesquisei a palavra DIY. Ensinaaaa fazer por favooor!

    ResponderExcluir
  24. A barra de pesquisa dela é do próprio blogger, ela só personalizou com as cores que ela queria. No google mesmo tem vários tutoriais de como fazer isso. Beijos

    ResponderExcluir
  25. tem como tirar aquele botãozinho que faz voltar para a home?

    ResponderExcluir
  26. Amei a postagem ! Obrigada, me ajudou muitoo beijos :*

    ResponderExcluir
  27. Funcionouuu obrigadãooo
    http://lpjcristo.blogspot.com.br/
    da uma olhadinha lá em Loucos por Jesus Cristo
    lpjcristo.blogspot.com.br/

    ResponderExcluir