09/08/2010

Personalizar pesquisa (cores e imagens da caixa de busca)

Esse tutorial mostrará como criar e personalizar uma pesquisa dentro do seu blog, vamos usar imagens e cores diferentes para fazer o campo de busca, trocar o botão pesquise por uma imagem a sua escolha e explicar como fazer essa pesquisa dentro do blog combinar com o seu template. Vamos trocar a imagem de fundo, cores do campo de busca e usar uma imagem como botão de pesquisa, mas os resultados dela serão os mesmos da pesquisa google para o seu blog. Mas você pode usar também uma caixa de pesquisa personalizada do Adsense e além de permitir pesquisas dentro do seu blog pode ganhar mais dinheiro com os anuncios google.






O código da pesquisa pesquisa personalizada está logo abaixo você precisa trocar o endereço que está nele para o do seu blog (note que aparece duas vezes no código), depois disso vamos mostrar como alterar as imagens e tamanho desta pesquisa.

<style type="text/css">
<!--
#barra-busca {
width: 500px;
height: 40px;
background-image: url(pesquisa-fundo.jpg);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
}
#form-busca {
background: none;
}
#form-busca #sprocura{
height: 20px;
width: 400px;
margin-top: 8px;
margin-left: 8px;
color: #0000CC;
border: 1px solid #000000;
float: left;
padding: 2px;
background-color: #FFFF99;
}
#form-busca #bt-busca {
height: 33px;
width: 37px;
background-image: url(pesquisa-botao.jpg);
border: none;
margin-top: 4px;
float: right;
cursor: pointer;
background-repeat: no-repeat;
background-position: left top;
margin-right: 10px;
}
-->
</style>
<div id="barra-busca">
<FORM id="form-busca" method=GET action="http://www.google.com.br/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://www.dicasparablogs.com.br"><input type=hidden name=sitesearch value="http://www.dicasparablogs.com.br">
</FORM></div>

Entre na pagina designer >> adicionar gadget >> html/javascript e coloque o código acima.

imagem de fundo da pesquisa
Agora vamos mostrar como personalizar sua pesquisa no começo do código tem a formatação (cores, imagens de fundo, posicionamento) tudo isso feito em CSS, então vamos por partes. Neste primeiro trecho temos a imagem de fundo da pesquisa
#barra-busca {
width: 500px;
height: 40px;
background-image: url(pesquisa-fundo.jpg);

Para usar outra imagem você precisa trocar o endereço da imagem(pesquisa-fundo.jpg) e alterar os valores width: 500px; e height: 40px; para o tamanho da imagem que está usando as dimensões da nova imagem.

Nesta parte é a formatação do campo de texto para digitar o que procuramos no site.
#form-busca #sprocura{
height: 20px;
width: 400px;
margin-top: 8px;
margin-left: 8px;
color: #0000CC;
border: 1px solid #000000;
float: left;
padding: 2px;
background-color: #FFFF99;
}

Aqui podemos fazer qualquer tipo de formação: escolher as cores de fundo, trocar as bordas, formatar o texto, veja nestes links que acabamos de mostrar como fazer cada uma destas coisas

botão de pesquisaAqui temos o botão usado na pesquisa.
#form-busca #bt-busca {
height: 33px;
width: 37px;
background-image: url(pesquisa-botao.jpg);

Da mesma maneira que falamos para a imagem de fundo da pesquisa é para trocar a imagem do botão, hospede uma imagem, coloque o endereço dela no lugar onde está pesquisa-botao.jpg e depois altere os valores 33px e 37 px com a largura e altura da imagem que está usando agora.

pesquisa personalizada
Apenas um aviso a imagem no inicio da postagem onde o texto fica aparecendo e sumindo é uma animação em flash apenas para ilustrar esse tutorial no seu blog a pesquisa aparecerá com o texto fixo como na imagem logo acima.
Related Posts with Thumbnails

80 comentários:

  1. faz tempo que estava procurando isso
    muito boa postagem

    ResponderExcluir
  2. Olá eu estou tentando colocar feed no meu site.. eu assinei aquele do google . mas chegou no final ñ sei mais o que faço vc poderia me ajudar ?

    ResponderExcluir
  3. Na vdd estou querendo um feed pro meu site pq li que ele é algo que as pessoas assinam e recebem atualizações do nosso site direto no email dizendo q tem novidades
    é isso mesmo ?

    ResponderExcluir
  4. Queria ajuda tb
    Pq no meu blog eu coloco o titulo junto com o resto da postagem só q com formatação diferente e estou querendo colocar o link da propria postagem no titulo mas quando coloco o link ele fica azul e eu queria q continuac na mesma formatação tem como ?

    ResponderExcluir
  5. veja aqui sobre o feed do seu blog

    Como usar o FeedBurner – RSS

    para mudar as cores do titulo da postagem entre na pagina editar html e procure por h3{...} e coloque color:#ff3300; veja aqui como Como Formatar o Texto do Blog

    ResponderExcluir
  6. gostei da posagem mais o seguinte. sabe quando alguem posta alguma coisa e aparece no final da Postado por fulano. como eu tiro isso? vc saberia?

    ResponderExcluir
  7. entre na pagina designer clique para editar as postagens, lá tem a opção do que aparece ou não Organizar postagem(ocultar data, comentarios...)

    ResponderExcluir
  8. Segui a sua dica e coloquei a caixinha personalizada no meu blog, mas quando tento fazer pesquisa a partir de lá,mesmo a coisa mais simples, a google abre mas diz sempre que não encontra resultados para a minha pesquisa... O que terei feito mal?

    ResponderExcluir
  9. lina
    envie o código como tentou usar no seu blog para meu email, vou olhar e fazer alguns testes

    ResponderExcluir
  10. oi Fabiano,
    a tag "alt" (ou title) do botão de busca está como "Editar" como faço para alterar isso?

    Obrigado.

    ResponderExcluir
  11. Tuma
    não tem nenhuma tag alt ou title neste código, poderia explicar melhor?

    ResponderExcluir
  12. eu sei que não tem, mas toda vez que passo o cursor do mouse em cima do botão de busca aparece "Editar"

    como mudo isso?

    ResponderExcluir
  13. deve ter algo de errado, fiz teste e não aparece nada quando passa o mouse sobre o botão, qual o endereço do blog que está com esse problema?

    ResponderExcluir
  14. Me ajudem eu butei isso no meu blog so que nao deu serto .O que eu faço ?

    ResponderExcluir
  15. precisa verificar os detalhes do código, as vezes um pequeno erro não deixa o código funcionar

    ResponderExcluir
  16. eu coloquei isso no meu blog, a imagem do botao de pesquisa nao aparece e eu nao consigo achar o erro, me ajudem? obrigada :D

    ResponderExcluir
  17. nao consigo concluir a "primeira lição" desta dica: mudar o background-image: url(pesquisa-fundo.jpg)

    salvei uma imagem no picasa, abri ela lá, copiei o link e colei entre os parenteses. nao deu certo. entao colei antes dos pareneteses. tb nada de alteração. o que fiz de errado? obrigado

    ResponderExcluir
  18. se a imagem de fundo não apareceu provavelmente o endereço da imagem não está correto, tem que ser um link direto para a imagem

    ResponderExcluir
  19. minha caisa de pesquisa eh comum do google msm..como eu faço pra mudar a cor de fundo(a minha eh branca) e o texto?(o meu eh preto)

    abraços

    ResponderExcluir
  20. neste estilo você muda a cor da caixa de pesquisa
    #form-busca #sprocura

    ResponderExcluir
  21. olá meu amigo tenho um blog de videos do you tube
    mais as pesquisas dele não apareciam em nenhuma caixa de pesquisa,até eu encontrar essa aqui que está encontrando muitos resultados, mais tem um problema ela está direcionado pro google gostaria de saber se tem como eu fazer as postagens pesquisadas aparecerem na pagina do meu blog?
    muito obrigado e parabéns pelo maravilhoso blog! blog.

    ResponderExcluir
  22. Video Galeria X
    na pagina do google adsense você tem a opção de mostrar os resultados incorporados a sua pagina, lá encontrá os códigos e mais detalhes sobre como usar

    ResponderExcluir
  23. Tentei,substitui tudo,e coloquei no html/javascript,até ai tudo certo,até aparece a imagem,mas quando eu salvo e coloco pra visualizar no blog,a imagem não aparece,nem as cores,aparece apenas uma caixa de pesquisa normal,e o botão também aparece normal,o que eu faço?

    ResponderExcluir
  24. Nay Caroline
    veja se criou os estilos CSS com nomes corretos.. qualquer letra sobrando ou faltando gera erro....

    se não conseguir resolver envie o código como esta´usando para meu email e vamos procurar o erro

    ResponderExcluir
  25. To testando e aprendendo ainda, mas gostei do post. Estava procurando

    ResponderExcluir
  26. olha fiz mais já tentei aumentar e diminuir os valores indicados por vc e nada,as cores ficaram certinha como qria porém os tamanhos ñ se ajustam como já falei aí em cima já mudei td,e qnd coloco uma palavra o google diz que ñ tem nada me ajuda por favor vou aguardar.Qualquer coisa mando o código pra vc ver.
    e-mail joseliaporfirio@yahoo.com.br

    ResponderExcluir
  27. Eu andei procurando pelo site (Não sei se olhei tudo) mas eu não encontrei como faço para criar um botão para que alguém me envie email diretamente para minha caixa de mensagem. Eu gostaria de saber...

    Obrigado. E nem preciso comentar que o Dicas para Blog é um ótimo site e que me ajuda muito!

    ResponderExcluir
  28. Jo Porfirio
    veja se usou o mesmo nome nos estilos... se trocou alguma coisa no código ele não funciona por exemplo #barra-busca


    Arthur Müller

    veja nos links abaixo:
    Colocar Formulário de Contato no Blogger

    Formulário de Contato no Blogger - Enviar Email

    ResponderExcluir
  29. Quero saber como colocar um texto personalizado dentro de uma caixa de texto, e que ele desapareça quando se clica para digitar.

    ResponderExcluir
  30. no código que mostramos o texto o que você procura aparece dentro da caixa, você só precisa trocar o texto

    ResponderExcluir
  31. Boa noite,vc poderia me ajudar colocar uma caixa de windows live no blog?Ou outra caixa de bate papo no blog?Desde ja obrigada.
    Email:katia.soledade@hotmail.com

    ResponderExcluir
  32. Oi to com um problema no meu sistema de busca, n consigo arrumar fais tempo ja, sera q teria como vc dar uma olhada para ver o jeito q ta, n acha as keywords certas.

    Estou mandando o Endereço do meu blog sei q n pode + n sei + o q fazer para arrumar isso :/

    http://fuckdown.blogspot.com/

    ou me add no mSN kabal.s2@hotmail.com

    Desde já agradeço
    Obrigado.

    ResponderExcluir
  33. os resultados são como o google vê seu blog... não temos como mudar isso... você pode usar meta tags, mas vai depender do google

    Descrição e Palavras Chave - Meta Tags

    ResponderExcluir
  34. Aff se kiser ajudar diz qual foi o codigo que vcs postaram q eu peguei tanto codigo aki q nem sei qual foi! aff

    ResponderExcluir
  35. já aconteceu comigo de abrir um site junto com meu blog, era um erro do adsense, você deve ver qual o site anunciante (o que abre junto com o blog) e bloquear no adsense, assim publicidade dele não aparecerá mais no seu blog

    Como Bloquear Anúncios do Google Adsense - Escolher Sites Anunciantes

    se quiser pode denunciar o site no adwords que é referente ao anuncio propriamente, porque em muitos casos é um flash que ativa a abertura do outro site o que foi feito de propósito pelo anunciante...

    ResponderExcluir
  36. As imagens não saem, dá pra explicar mais detalhado? Eu coloco o url e a foto não sai.

    ResponderExcluir
  37. Marcelinho207
    qual url da imagem está usando? na maioria das vezes o problema é endereço errado da imagem, veja aqui: Imagem não aparece

    ResponderExcluir
  38. Fabiano por favor tem como vc me ajudar? eu fiz tudo e deu certo, mais só tem um problema a caixa que digita o que vc quer buscar ficou em cima da imagem que fiz pra ela ou seja ficou muito a direita tem como eu centralizar isso ?? Sei que não pode mais por favor me ajuda ai quero fazer este blog logo. http://filmesdubladoslagartao.blogspot.com/

    ResponderExcluir
  39. Fabiano amigo olha só o meu buscador, não funciona eu digito o nome de algo no meu blog e ele só vai pra pág inicial, tem como me ajudar ???

    ResponderExcluir
  40. Obrigada por postar esse tutorial. Vou linkar você no meu blog.
    Ficou direitinho no meu blog, mudei o fundo e a fonte da caixa de pesquisa, só queria saber qual é o código html para que o texto personalizado dentro da caixa desapareça, quando alguém clicar para digitar a pesquisa.
    Agradeço se puder me ajudar.

    ResponderExcluir
  41. Cara... Usei o código acima e deu tudo certo menos o alinhamento entre (barra bg + form) e botão de procurar. o botão está na linha de baixo e não consigo coloca-la ao lado da barra.
    Alguma sugestão?

    ResponderExcluir
  42. A imagem de 33 x 37 não aparece em nenhum formato no meu blog, equando pesquiso n encontra nada, msm eu copiando o titolo do post e colando na caixa, ainda n axa nada !
    repassei o codigo varias vezes, letra por letra, e ta igual..
    n entendoo o q ta acontecendo !

    :s

    ResponderExcluir
  43. ideio ironia, mais quando coloquei o endereço do ( d b ) blog aqui funcionou, coloquei o endereço do meu blog n funciona.. hehehe..

    esse buscados ta batizado !
    hehe

    ResponderExcluir
  44. me ajuda aee, jah fiz tudo imaginavel e a imagem 34 x 37 não aparece , em nenhum formato !
    jah repassei letra por letra do codigo e não ta funcionando aqui !

    ggghhh ...

    ResponderExcluir
  45. ok.. mais to falando dese botão -->

    ((((Aqui temos o botão usado na pesquisa.
    #form-busca #bt-busca {
    height: 33px;
    width: 37px;
    background-image: url(pesquisa-botao.jpg); )))

    fiz o teste aqui com a mesma imagem aqui do blog.. a imagem da lupa com a borda azul.. e só funcionou no google crhome, no explorer e no mozilla n funciona, pelomenos aqui no meu blog !

    será q o codigo q coloquei do favicom aqui p funcionar nesses 3 navegadores ta interferindo
    em alguma coisa nessa perssonalização do buscador?

    axo qnão ne.. pq foi em outro lugar do template, axo q n tem nada a ver ..

    ResponderExcluir
  46. marcos, veja se não apagou alguma parte do código do favicon por engano... se não falta fechar as chaves ou algum outro sinal nos códigos

    ResponderExcluir
  47. o codigo do favicom é pequeno e ta funcionando perfeitamente..

    o problema é na caixa perssonalizada ..
    repassei o codigo varias vezes , e tava certo..
    criei um outro blog p v se o problem era no meu template..

    ..e no blog q criei ta do msm geito..
    so funciona no navegador google crhome, as imagens ca caixa..
    são todas .jpg

    mais deixa.. so vim p da uma exlicação..

    vlw pela atenção !

    ResponderExcluir
  48. tem alguém anline ai..

    ajuda aquii por favor..
    tava perssonalizando a caixa (acompanhar por email) e apaguei uma linha do template p colocar outra.. acabou q meu c travou e perdi o lugar p colocar aoutra linha..
    a que apaguei foi essa-->> <input class='follow-by-email-address' name='email' placeholder='Email address...' type=

    alguém ai sab o lugar q ela estava ?
    pra eu poder colocar a outra !

    ResponderExcluir
  49. marcos
    o melhor a fazer é pegar o código novamente no feedburner, veja aqui: Enviar Atualizações por Email

    ResponderExcluir
  50. olá, tenho uma dúvida..
    como não gosto das pesquisas personalizadas do google, eu troquei o "http://google.com/search" por "http://www.wakaranai.net/search" (wakaranai.net é meu site) e funciona, ele acha o que está dentro do site, mas não muito, tem pesquisa que só acha um post, sendo que eu sei que tem mais.
    Tem algum comando para que ele ache tudo o que tenha a palavra digitada?

    ResponderExcluir
  51. Bruna_Hana
    as melhores maneiras de colocar pesquisa dentro do seu blog é esse código com base no google ou usar o adsense que também é google, mas você pode ganhar algum dinheiro com ela... veja aqui: Busca dentro do blog - AdSense para pesquisas

    ResponderExcluir
  52. Olá já tentei de tudo, só consigo mudar a imagem do botão, a imagem da caixa não consegui mudar, hospodei em vários lugares diferentes e mudei as dimensões.
    O link das imagens estão corretos.
    será que tenho que apagar alguma coisa pra caixa laranja sair?
    gostei muito da personalização e gostaria de colocar no meu blog.
    aguardo resposta.abraço
    http://www.makeshop-blog.com/

    ResponderExcluir
  53. a parte que digita o texto é neste estilo #form-busca #sprocura tem que alterar a cor de fundo

    ResponderExcluir
  54. olha o seguinte código:


    #form-busca {
    background: none;
    }


    Eu acho que é por causa dele que não está aparecendo o botão.

    ResponderExcluir
  55. o botão é neste trecho background-image: url(pesquisa-botao.jpg);

    mas precisa usar o endereço certo da imagem (direct link)

    ResponderExcluir
  56. Fabiano parabéns pelas dicas de blogger é muito bom ter pessoas que gostam de repassa seus conhecimentos. Pois a única coisa que você divide e se multiplica é o conhecimento!

    ResponderExcluir
  57. Olá, consegui inserir quase tudo. Estou com uma dúvida do botão de pesquisa, criei uma lupinha com o fundo transparente, mas quando coloco a imagem, fica um fundo branco por traz,mesmo quando eu tiro o link da imagem, esse fundo continua. como faço para retirar?

    ResponderExcluir
  58. @Mari e Tici pode ser a imagem da lupa que tem fundo branco.

    precisaria criar um imagem gif ou png com fundo transparente

    e veja também se tem algum backgroud:#...

    isso é cor de fundo e pode interferir no caso da imagem transparente

    ResponderExcluir
  59. Olá Fabiano, adorei as dicas, consegui fazer a caixinha do jeito que queria, mas ao colocar num gadget ao lado do meu cabeçalho, ela fica muito para a esquerda... já mudei o top center pra right, mas não deu certo... Poderia me ajudar ?
    Obrigado !!!
    abçs ;)

    ResponderExcluir
  60. @Samanta Sammy no começo do código

    #barra-busca {
    width: 500px;
    height: 40px;

    coloque padding-right:10px

    ou padding-left:10px

    dependendo do lado que deseja ter mais espaço e ajuste o valor 10

    ResponderExcluir
  61. Tentei fazer isso da caixinha personalizada, usando uma que eu fiz, mas não deu certo. Não aparece, acho que é porque o blogger mudou.

    ResponderExcluir
  62. pode ser algum detalhe no código, por exemplo qualquer sinal faltando ou sobrando não deixa funcionar

    ; " > / < '

    ResponderExcluir
  63. Como eu faço pra botar essa caixa de pesquisa ao lado do cabeçalho do meu blog so que um fica de um lado da pag e o outro o mais longe possivel ?

    ResponderExcluir
  64. Olá Fabiano, obrigado pela atenção, acebei conseguindo apenas com o div align, e agora está uma belezura !!!
    Valeu mesmo !!

    Grande abraço e obrigado por compartilhar conosco !!

    ResponderExcluir
  65. gabi mega X
    essa imagem é apenas uma demostração, ela é feita em flash ou seja na verdade não é uma imagem é uma animação (.swf)

    ResponderExcluir
  66. Como fazer o texto "O que você procura?" desaparecer quando o leitor clicar na barra de busca para pesquisar?

    ResponderExcluir
  67. Fabiano qual o programa que você usou para criar a animação swf deste post?
    Anônimo, boa pergunta.

    ResponderExcluir
  68. Matheus
    faz tempo que não faço coisas em flash... mas o programa é o flash cs5

    ResponderExcluir
  69. queria um tuto que me ajudasse a criar o minha própria caixa de pesquisa, desde imagem...
    mas valeu pela dica

    ResponderExcluir
  70. essa caixa fizemos com imagem de fundo...

    ResponderExcluir
  71. Olá, Roberto.
    Personalizei a caixinha do meu blog, e gostaria de saber por que algumas caixinhas com frase ex: "O que procura"; "pesquise", etc. Quando clicamos automaticamente a frase some, mas na minha não some (é preciso deletar).
    Existe um código pra fazer a frase sumir automaticamente?
    Espero :D

    ResponderExcluir
  72. Liege Karina
    não conheço código para deletar automaticamente, mas se quiser pode apagar aquele texto e deixar somente a caixa.

    ResponderExcluir
  73. Olá,Fabiano
    descobri sozinha como fazer sumir automaticamente a frase que fica no campo da caixa de pesquisa. Notei que no HTML do gadget "se inscrever por e-amil" do meu blog, tinha a parte "placeholder" antes de "Digite seu e-amil".
    Venho dividir com os leitores do blog e com você, caso precisem:

    Eu acrescentei placeholder= antes da palavra "pesquise", no HTML JavaScript, no layout do blogger.


    Era assim:

    (tag form)action="/search" class="search" method="get">
    (tag input) class="searchbar" id="s" name="q" type="text" value="Pesquise..." />
    tem que colocar a tag form pra finalizar também (não aceitou no comment)


    Acrescentei e ficou assim:

    (tag form) action="/search" class="search" method="get">
    (tag input)class="searchbar" id="s" name="q" type="text" value="" placeholder="Pesquise..." />
    tem que colocar a tag form pra finalizar também (não aceitou no comment)



    Gosto muito do seu blog. Sempre nos ajuda :D
    Hoje foi a minha vez
    Beijos

    ResponderExcluir
  74. Liege Karina

    realmente eu não conhecia o código placeholder

    foi um ótima dica e obrigado por compartilhar a solução que achou.

    ResponderExcluir
  75. Como botar o botão do lado da caixa? O meu ficou em baixo na ponta. queria por na ponta direita do lado da caixa..

    ResponderExcluir
  76. o posicionamento do botão é neste trecho do código:

    #form-busca #bt-busca {
    height: 33px;
    width: 37px;
    background-image: url(pesquisa-botao.jpg);
    border: none;
    margin-top: 4px;
    float: right;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left top;
    margin-right: 10px;
    }

    troque float: right; por
    float: left;

    e depois ajuste a posição na linha
    background-position: left top;

    pode trocar as palavras left ou top por valores em px ou por right para mudar de lado

    ResponderExcluir