Demostração da Caixa de Busca em imagem:
1º Passo - Instalando o CSS ao Blog
1. Faça Login no Blogger
2. Em seguida, no menu suspenso, clique em Modelo.
3. Depois clique no Botão Editar HTML
4. E procure pela seguinte tag:
]]></b:skin>
5. E acima da tag citada acima adicione o seguinte código:
.busca { background:url(http://tecnoblogwebshost.webs.com/bg-busca.png) no-repeat; height:51px; width:304px; margin:0 0 10px 0; position:relative; }
.pesquisa { float:left; margin:13px 0 0 13px; padding:5px; color:#666; width:230px; border:none; background:none; font-size:14px; outline:none; }
.button { float:left; margin:7px 0 0 13px; }
.button:hover { opacity:0.9; filter:alpha(opacity=80); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
Pronto, a parte de instalação do CSS esta no Fim, Agora vamos ao Segundo Passo!
2º Passo - Configurando e adicionando a caixa ao Blog
1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:
<div class="busca">
<form method="get" action="URL do seu BLOG">
<input class="pesquisa" type="text" value="Faça sua busca..." name="s" size="10" onclick="if (this.value == 'faça sua busca...') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'faça sua busca...'; }" />
<input type="image" src="http://tecnoblogwebshost.webs.com/buscar.png" class="button"/>
</form>
</div
Pronto Pessoal, Gostaram? Então não Deixem de comentar, Até mais, Fiquem com Deus ..
15 Comentários
Olá Caio.
12 de maio de 2012 às 21:24Muito bom seu artigo, gostei da caixa de pesquisa estou utilizando em um blog meu.
Abraços!
Caio, você poderia hospedar uma imagem da caixa versão um e dois e mostrar?
12 de maio de 2012 às 21:51Eu agradeço.
Olá Izaque!
13 de maio de 2012 às 14:44Acabei de Atualizar as posts com as imagens das caixas versões 1 e 2.
Até mais, Abraços e Fica com Deus. Volte Sempre.
Obrigado cara.
13 de maio de 2012 às 16:42Não há de que amigo, Fica com Deus! Abraços!
13 de maio de 2012 às 19:38ai cara eu coloquei sua caixa de busca no meu blog de teste mais só que não esta procurando os filmes. eu coloco os nomes dos filmes ai carrega a pagina como fosse acha o filme mais nada de filme olhe ai se vc acha o erro ! esperando resposta!
19 de setembro de 2012 às 15:10Olá,
25 de setembro de 2012 às 15:22Adicionei esta caixa de pesquisa no blog, porém ao fazer o testo consta como: "Esta página não existe neste blog". Entretanto, eu busco por um assunto que há no blog, no local aonde coloco "URL do Blog" eu colo o endereço do blog entre "http://", devo retirá-lo?
Desde já agradeço, forte abraço.
Olá Robson, poderia me passar seu site, para ver o erro?
25 de setembro de 2012 às 17:43Olá "Quem subirá?" você tem certeza que modificou a parte destacada de vermelho no 5° Passo pela a URL do seu Blog/Site se não faça isso, caso não haja efeito informe-me, que eu irei te ajudar. Abraços, Fica Com Deus.
25 de setembro de 2012 às 17:46Olá Caio, sim eu fiz. Eu ao invés de criar um gadget, joguei-o direito no códgio HTML. Pois eu coloquei a caixa de pesquisa na parte superior da tela: http://testesquemsubira.blogspot.com.br/ Dá uma olhada aí. Ao procurar, fica na página inicial.
28 de setembro de 2012 às 13:10Tem como mudar a Cor
15 de novembro de 2012 às 11:08Não teu pra buscar
15 de novembro de 2012 às 11:31Olá Calebe a cor do fundo é uma imagem! Mas se você tiver o minimo de experiência em algum editor e criar o fundo faz assim, no código do passo 5 (do primeiro passo) você encontra a seguinte URL: http://tecnoblogwebshost.webs.com/bg-busca.png
15 de novembro de 2012 às 12:50- Mude ela por uma imagem que você criou (OBS: com as mesma dimensões)
Depois substitua a URL que te passei aqui por sua imagem criada, não se esqueça de hospeda-la! (No Picasa de preferência)
Pronto, espero ter te ajudado.
como eu mudo a cor?
19 de março de 2013 às 13:22olha meu blog n tem esse código ]]> :c
1 de setembro de 2014 às 03:16Postar um comentário
Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!