Veja também: Colocar Barra/Caixa de Pesquisa Personalizada no Site/Blog
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.

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

#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.

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.
faz tempo que estava procurando isso
ResponderExcluirmuito boa postagem
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 ?
ResponderExcluirNa 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
ResponderExcluiré isso mesmo ?
Queria ajuda tb
ResponderExcluirPq 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 ?
veja aqui sobre o feed do seu blog
ResponderExcluirComo 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
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?
ResponderExcluirentre na pagina designer clique para editar as postagens, lá tem a opção do que aparece ou não Organizar postagem(ocultar data, comentarios...)
ResponderExcluirSegui 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?
ResponderExcluirlina
ResponderExcluirenvie o código como tentou usar no seu blog para meu email, vou olhar e fazer alguns testes
oi Fabiano,
ResponderExcluira tag "alt" (ou title) do botão de busca está como "Editar" como faço para alterar isso?
Obrigado.
Tuma
ResponderExcluirnão tem nenhuma tag alt ou title neste código, poderia explicar melhor?
eu sei que não tem, mas toda vez que passo o cursor do mouse em cima do botão de busca aparece "Editar"
ResponderExcluircomo mudo isso?
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?
ResponderExcluirMe ajudem eu butei isso no meu blog so que nao deu serto .O que eu faço ?
ResponderExcluirprecisa verificar os detalhes do código, as vezes um pequeno erro não deixa o código funcionar
ResponderExcluireu coloquei isso no meu blog, a imagem do botao de pesquisa nao aparece e eu nao consigo achar o erro, me ajudem? obrigada :D
ResponderExcluirnao consigo concluir a "primeira lição" desta dica: mudar o background-image: url(pesquisa-fundo.jpg)
ResponderExcluirsalvei 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
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
ResponderExcluirminha 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)
ResponderExcluirabraços
neste estilo você muda a cor da caixa de pesquisa
ResponderExcluir#form-busca #sprocura
olá meu amigo tenho um blog de videos do you tube
ResponderExcluirmais 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.
Video Galeria X
ResponderExcluirna 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
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?
ResponderExcluirNay Caroline
ResponderExcluirveja 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
To testando e aprendendo ainda, mas gostei do post. Estava procurando
ResponderExcluirolha 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.
ResponderExcluire-mail joseliaporfirio@yahoo.com.br
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...
ResponderExcluirObrigado. E nem preciso comentar que o Dicas para Blog é um ótimo site e que me ajuda muito!
Jo Porfirio
ResponderExcluirveja 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
Quero saber como colocar um texto personalizado dentro de uma caixa de texto, e que ele desapareça quando se clica para digitar.
ResponderExcluirno código que mostramos o texto o que você procura aparece dentro da caixa, você só precisa trocar o texto
ResponderExcluirBoa noite,vc poderia me ajudar colocar uma caixa de windows live no blog?Ou outra caixa de bate papo no blog?Desde ja obrigada.
ResponderExcluirEmail:katia.soledade@hotmail.com
katia e.v.a.
ResponderExcluirveja aqui sobre bate papo:
Colocar Sala de Bate Papo no Blog - Crie seu Chat
Colocar mural de recados ou chat no blog
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.
ResponderExcluirEstou 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.
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
ResponderExcluirDescrição e Palavras Chave - Meta Tags
Aff se kiser ajudar diz qual foi o codigo que vcs postaram q eu peguei tanto codigo aki q nem sei qual foi! aff
ResponderExcluirjá 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
ResponderExcluirComo 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...
As imagens não saem, dá pra explicar mais detalhado? Eu coloco o url e a foto não sai.
ResponderExcluirMarcelinho207
ResponderExcluirqual url da imagem está usando? na maioria das vezes o problema é endereço errado da imagem, veja aqui: Imagem não aparece
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/
ResponderExcluirFabiano 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 ???
ResponderExcluirObrigada por postar esse tutorial. Vou linkar você no meu blog.
ResponderExcluirFicou 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.
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.
ResponderExcluirAlguma sugestão?
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 !
ResponderExcluirrepassei o codigo varias vezes, letra por letra, e ta igual..
n entendoo o q ta acontecendo !
:s
ideio ironia, mais quando coloquei o endereço do ( d b ) blog aqui funcionou, coloquei o endereço do meu blog n funciona.. hehehe..
ResponderExcluiresse buscados ta batizado !
hehe
me ajuda aee, jah fiz tudo imaginavel e a imagem 34 x 37 não aparece , em nenhum formato !
ResponderExcluirjah repassei letra por letra do codigo e não ta funcionando aqui !
ggghhh ...
o tamanho certo do favicon é 16x16
ResponderExcluirok.. mais to falando dese botão -->
ResponderExcluir((((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 ..
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
ResponderExcluiro codigo do favicom é pequeno e ta funcionando perfeitamente..
ResponderExcluiro 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 !
tem alguém anline ai..
ResponderExcluirajuda 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 !
marcos
ResponderExcluiro melhor a fazer é pegar o código novamente no feedburner, veja aqui: Enviar Atualizações por Email
olá, tenho uma dúvida..
ResponderExcluircomo 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?
Bruna_Hana
ResponderExcluiras 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
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.
ResponderExcluirO 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/
a parte que digita o texto é neste estilo #form-busca #sprocura tem que alterar a cor de fundo
ResponderExcluirolha o seguinte código:
ResponderExcluir#form-busca {
background: none;
}
Eu acho que é por causa dele que não está aparecendo o botão.
o botão é neste trecho background-image: url(pesquisa-botao.jpg);
ResponderExcluirmas precisa usar o endereço certo da imagem (direct link)
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!
ResponderExcluirOlá, 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@Mari e Tici pode ser a imagem da lupa que tem fundo branco.
ResponderExcluirprecisaria 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
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 ?
ResponderExcluirObrigado !!!
abçs ;)
@Samanta Sammy no começo do código
ResponderExcluir#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
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.
ResponderExcluirpode ser algum detalhe no código, por exemplo qualquer sinal faltando ou sobrando não deixa funcionar
ResponderExcluir; " > / < '
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 ?
ResponderExcluirOlá Fabiano, obrigado pela atenção, acebei conseguindo apenas com o div align, e agora está uma belezura !!!
ResponderExcluirValeu mesmo !!
Grande abraço e obrigado por compartilhar conosco !!
Como fez esta imagem que muda
ResponderExcluirgabi mega X
ResponderExcluiressa imagem é apenas uma demostração, ela é feita em flash ou seja na verdade não é uma imagem é uma animação (.swf)
Como fazer o texto "O que você procura?" desaparecer quando o leitor clicar na barra de busca para pesquisar?
ResponderExcluirFabiano qual o programa que você usou para criar a animação swf deste post?
ResponderExcluirAnônimo, boa pergunta.
Matheus
ResponderExcluirfaz tempo que não faço coisas em flash... mas o programa é o flash cs5
queria um tuto que me ajudasse a criar o minha própria caixa de pesquisa, desde imagem...
ResponderExcluirmas valeu pela dica
essa caixa fizemos com imagem de fundo...
ResponderExcluirOlá, Roberto.
ResponderExcluirPersonalizei 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
Liege Karina
ResponderExcluirnão conheço código para deletar automaticamente, mas se quiser pode apagar aquele texto e deixar somente a caixa.
Obrigada!
ResponderExcluir:D
Olá,Fabiano
ResponderExcluirdescobri 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
Liege Karina
ResponderExcluirrealmente eu não conhecia o código placeholder
foi um ótima dica e obrigado por compartilhar a solução que achou.
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..
ResponderExcluiro posicionamento do botão é neste trecho do código:
ResponderExcluir#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