Caixa de pesquisa personalizada

1 de ago de 2011

Oi meninas e meninos hoje resolvi trazer um tutorial que procurava há tempos, e acho que vocês vão gostar. Esse tutorial é pra ensinar vocês a trocarem aquela caixa de busca horrenda do google por uma caixa personalizada como a do GI. É bem mais bonitinha não acham? (: Ah, mais uma coisa: Você pode personalizar as cores, o botão e o texto que aparece dentro da caixa.
Então só pra adiantar vou mostrar qual é o resultado:


Clique em Leia Mais para ver o tutorial *-*

Abra o seu blog, vá em Design -> Elementos da página -> Adicionar um gadget -> escolha o de HTML/Java Script e cole o código abaixo:



   <style type="text/css">
   <!--
   #form-busca {
   background: none;
   }
   #form-busca #sprocura{
   height: 18px; 
   width: 150px; 
   margin-top: 4px;
   margin-left: 0px;
   color: #453830; 
   border: 1px solid#FFC6FF;
   float: left;
   padding: 2px;
   background-color: #FFE4E1; 
   }
   #form-busca #bt-busca {
   height: 20px;
   width: 23px;
   background-image: url ( url );
   border: none;
   margin-top: 6px;
   float: right;
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: left top;
   margin-right: 35px;
   }
   -->
   </style>
   <div id="barra-busca">
   <form id="form-busca" method=get       
 action="http://goimagines.blogspot.com/search"><input id="sprocura" type=text name=q maxlength=255 value="O que você procura?" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="http://goimagines.blogspot.com " /><input type="hidden" name="sitesearch" value="http://goimagines.blogspot.com " />
</form></div>

 Note que a url do GI aparece 3 vezes (destacada em negrito) e troque-as pela url do seu blog.
A frase destacada em lilás você pode alterar, é a frase que fica dentro da caixa.
Lembra que eu disse que você pode personalizar a caixa? Para isso vamos entender a parte que refere-se a caixa em si:


  #form-busca #sprocura{
  height: 18px; (trata-se da altura da caixa, quanto maior o numero mais alta fica AVÁ)
  width: 150px; (trata-se da largura da caixa)
  margin-top: 4px;
  margin-left: 0px;
  color: #453830; (é a cor do texto)
  border: 1px solid#FFC6FF; (é a cor da borda da caixa)
  float: left;
  padding: 2px;
  background-color: #FFE4E1; (é a cor do fundo da caixa)
  }

Para alterar as cores use uma tabela, clique aqui para acessar uma.
Para esclarecer:
- Quanto maior o valor do numero de "margin-left" mais para a direita a caixa fica. Se quiser que a caixa fique mais para a esquerda use um numero negativo por exemplo: -4px
-Quanto menor o valor do numero de "margin-top" mais para cima fica. Se quiser que a caixa fique mais para baixo aumente o valor do numero.

Agora vamos entender a parte do código que trata-se ao botão que fica ao lado da caixa:



  #form-busca #bt-busca {
  height: 20px; (altura do botão)
  width: 23px; (largura do botão)
  background-image: url(url do seu botão);
  border: none;
  margin-top: 6px;
  float: right;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: left top;
  margin-right: 35px;
  }



Detalhes:
-O valor de "height" e "widht" você deve alterar conforme o tamanho da imagem do seu botão.
-Quanto maior o valor do numero de "Margin-top" mais pra baixo o botão fica, se quiser por ele mais pra cima diminua o valor do numero.
-Margin-right: É complicado dizer ao certo as "coordenadas" de quanto maior o numero mais pra baixo ou pra cima fica. Eu fui testando e se colocava um numero muito baixo (- negativo) ou muito alto o botão ficava longe da caixa. Então vá alterando o valor do numero até ficar como você deseja.
-Url: Acho que não preciso explicar o que é né? -rs É só colocar entre os (parenteses) a url da imagem que você escolher. Como sou muuito boazinha (não) eu fiz 2 botões pra vocês e uma base para fazerem os seus próprios botões, espero que de pro gasto haha.











Espero que tenha gostado do tutorial, fiquei a tarde toda montando ele pra ficar bem explicadinho rs. Espero que tenham entendido e qualquer duvida é só comentar e se não tiver duvida comente também rs 

32 comentários:

  1. Olá, nosso blog Saladadefrutasbr, mudou o design, e agora terá uma bateria de postagens super legais, feitas pelas donas vê lá, fala o que acha do nosso blog, e não esquece de seguir ele, agente retribui !
    Comenta lá nossos posts, e se quiser parceria avisa lá na nossa cbox, ou nos comentarios (:
    Beijos, amei o seu blog

    saladadefrutasbr.blogspot.com

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

    ResponderExcluir
  3. Amei o tuto, coloquei a barra nova no meu blog, por que ngm merece essas barrinhas do google, horrendas u.u
    obg pela dica, amr *-*
    Beeijo!
    http://tendencias-teens.blogspot.com/

    ResponderExcluir
  4. Oootimas dicas!! Amei
    Traz mais pra gente.
    Bjinhoo

    ResponderExcluir
  5. Adorei seu blog ele é d++++++++++,e as dicas são otimas.gostaria que você visitasse o meu http://Raymiga.blogspot.com ok.bj

    ResponderExcluir
  6. Nossa que lindo fica ,adorei.
    http://sweets2dreams.blogspot.com/

    ResponderExcluir
  7. Adoro tutoriais do tipo!
    Lindo blog *--*

    http://tecido-doce.blogspot.com/
    http://cerejadeneve.wordpress.com/

    ResponderExcluir
  8. adorei o tutorial!!!
    So acho que você devia colocar antes do tutorial, o lugar que é pra colocar o html, como eu sou do tipo de pessoa que faz o tutorial lendo, confesso que fiquei perdida!
    Mas ficou legal!!
    Vou dar um jeito da aplicar no ETc
    BJs

    ResponderExcluir
  9. Quue legal amei o tutorial em breve vou usar no meu ((:

    To seguindo, retribui ?
    http://ladysmart-blog.blogspot.com/

    ResponderExcluir
  10. Vou testar no meu blog *-*
    Ah, eu cortei a franja de lado, tipo das fotos que eu postei no post, só que não tão 'cheia' haha
    Mas tenta cortar seu cabelo, se não gostar um dia cresce suahushausha
    1bj♥

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  11. Oii, td bem? Só passei p avisar que AMANHÃ (13/8) o meu blog Makes da Júlia vai passar a se chamar Girl's Place. O link será: www.blog-girlsplace.blogspot.com

    A mudança será as 14h00, entao depois das 14h vai ser o novo link.

    Obg!!

    ResponderExcluir
  12. adorei, vou fazer no meu blog (: seguindo aqi, amei seu blog, bjim
    http://whatthehellsociedade.blogspot.com

    ResponderExcluir
  13. Adoooorei o tutorial, já favoritei e vou usar nos proximos lays do PF, e PFE. Beijooos!

    ResponderExcluir
  14. Oi! Para remover o texto da caixa é só remover o texto?
    Beijo, Ana Lola

    http://maioucherry.blogspot.com

    ResponderExcluir
  15. Oi, eu não consegui mudar o botão de novo! Poderia me ajudar?

    Beijos,
    Ana Lola

    http://s2cb.blogspot.com

    ResponderExcluir
  16. Amei o seu blog!Super legal a caixinha!Estava procurando,obrigado.Já coloquei os créditos!
    Blog reaberto dia 6 de maio!Estreia!Visite:
    http://garotateenoficial.blogspot.com.br/

    ResponderExcluir
  17. Oie,ammei esse tutorial faz 'uns 10 anos' que eu procurava por essa caixa personalizada e as que eu encontrava nunk dava certo,mais essa ficou show deu super certo no meu theme,mais como faz pra deixar ela no cabeçalho igual está o seu flor?
    BjooO!

    ResponderExcluir
  18. Divino!
    Vuuuup>>>>http://portal-girls-oficial.blogspot.com.br/

    ResponderExcluir
  19. Muito bom mesmo, pena que não dá pra copiar o Url das caixinhas de pesquisa que você fez. Mas eu adorei!
    E, você poderia ensinar como personalizar a caixinha de comentários que nem essa sua? A minha tá horrível. T_T
    Thanks <3

    ResponderExcluir
    Respostas
    1. Flor, é só clicar na imagem, ai vai abrir no tamanho original, então você arrasta essa imagem pra uma nova guia. Na nova guia você poderá clicar com o botão direito pra salvar! #fikadica

      Excluir
    2. A caixinha de comentários eu ensinei aqui:

      goimagines.blogspot.com.br/2012/09/threaded-comments-personalizado.html

      Excluir
  20. Olá, Anny! Tudo bem? Fiz uma nova imagem, copiei a url, colei lá, mas não apareceu. Por quê?

    ResponderExcluir
  21. Hi there Dear, аrе yοu actuаlly visiting this web
    pаgе on a regular basiѕ, іf ѕo afteг
    that уοu ωill without ԁoubt gеt goоd experіence.


    Μy homepage pikavippi
    my webpage: pikavippi

    ResponderExcluir
  22. I love what you guуs are uр tоο.
    This tyρe of clеѵеr work and eхpοsure!
    Keep up the supеrb ωоrks guyѕ Ӏ've incorporated you guys to our blogroll.

    Check out my page ... forex
    Also visit my site ; zulutrade erfahrung

    ResponderExcluir
  23. Wondeгful blog! I founԁ it while browsing on Yahοο News.

    Dο you have аny suggeѕtions on how
    tο get listed in Yahoo Newѕ? I've been trying for a while but I never seem to get there! Many thanks

    Feel free to visit my blog ... twitter 10000 followers
    My web page :: buy targeted twitter followers

    ResponderExcluir
  24. Eu posso através desse código, colocar a caixa no cabeçalho? Modificando a parte de "para cima " ou "para baixo"?

    ResponderExcluir
  25. Olá! Adorei o seu tutorial. está muto bem explicado. parabéns! Bjs

    ResponderExcluir
  26. Muito bom!!!! Me ajudou muito!
    http://feminicesdaloira.blogspot.com/

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.