Caixa de pesquisa personalizada para blog (Versão 2)

► +A +/- -A
Olá Querido Leitor! Estarei neste tutorial de hoje, ensinando a vocês a como adicionar a nova caixa de busca Versão 2 disponibilizada aqui no Tecnoblog,  a caixa de busca tem um estilo bem elegante e moderno, a caixa de busca não tem efeitos fantásticos, fiz algo leve, bonito e moderno para que ela não fique muito densa. Então Vamos ao Tutorial!
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
O Elemento Destacado de Vermelho será aonde você devera substituir pela URL do seu Blog

Pronto Pessoal, Gostaram? Então não Deixem de comentar, Até mais, Fiquem com Deus ..
► Postagens Relacionadas:

15 Comentários

Herlan Santos disse...

Olá Caio.
Muito bom seu artigo, gostei da caixa de pesquisa estou utilizando em um blog meu.
Abraços!

12 de maio de 2012 21:24
Izaque Liborio disse...

Caio, você poderia hospedar uma imagem da caixa versão um e dois e mostrar?
Eu agradeço.

12 de maio de 2012 21:51
Caio Vinicius disse...

Olá Izaque!
Acabei de Atualizar as posts com as imagens das caixas versões 1 e 2.
Até mais, Abraços e Fica com Deus. Volte Sempre.

13 de maio de 2012 14:44
Izaque Liborio disse...

Obrigado cara.

13 de maio de 2012 16:42
Caio Vinicius disse...

Não há de que amigo, Fica com Deus! Abraços!

13 de maio de 2012 19:38
robson disse...

ai 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 15:10
Quem Subirá? disse...

Olá,

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

25 de setembro de 2012 15:22
Caio Vinicius disse...

Olá Robson, poderia me passar seu site, para ver o erro?

25 de setembro de 2012 17:43
Caio Vinicius disse...

Olá "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 17:46
Quem Subirá? disse...

Olá 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 13:10
calebe disse...

Tem como mudar a Cor

15 de novembro de 2012 11:08
calebe disse...

Não teu pra buscar

15 de novembro de 2012 11:31
Caio Vinicius disse...

Olá 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

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

15 de novembro de 2012 12:50
Thalita disse...

como eu mudo a cor?

19 de março de 2013 13:22
Mitz disse...

olha meu blog n tem esse código ]]> :c

1 de setembro de 2014 03:16

Postar 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!