quinta-feira, 3 de novembro de 2011

5 buscadores com tons diferentes e com reconhecimento de voz

Há uns dias atrás postei aqui no cblogger um buscador avançado, que por sua vez tinha como novidade o reconhecimento de voz. Porém, o buscador era simples, mas ao final falei que iria postar outros com a mesma funcionalidade, só que personalizado. Pois bem, aqui estou postando pra vocês 5 buscadores com mesmo estilo, mas com cores diferentes.

Como dito na postagem do buscador com reconhecimento de voz simples, este, muda apenas o estilo, mas a funcionalidade continua a mesma, deixando seu blog com um buscador mais elaborado e divertido ao mesmo tempo. Vamos colocar em seu blog? É fácil, veja:

1. Faça o login no blogger.

2. Acesse a guia “Layout” –> “Adicionar um gadget” e clique na opção “HTML/Javascript”.

3. Agora cole um dos códigos abaixo conforme seu gosto. Depois salve.

Buscador 1

<style>
.botprocura1 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 35px;
background-position-x: -181px;
width: 45px;
cursor: pointer;
float: right;
}

.botprocura1:hover {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
background-position-x: -413px;
}

.caixadetexto1 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 34px;
width: 160px;
padding-right: 9px;
padding-left: 10px;
}

.acaixaproc1 {
width: 227px;
}

</style>

<form method="get" class="acaixaproc1" action="/search"><input type="text"  class="caixadetexto1" name="q" size="30" x-webkit-speech/>
<input type="submit" class="botprocura1" value=""/></form>

Buscador2

<style>
.botprocura2 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 35px;
background-position-x: -181px;
background-position-y: -35px;
width: 45px;
cursor: pointer;
float: right;
}

.botprocura2:hover {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
background-position-x: -413px;
background-position-y: -35px;
}

.caixadetexto2 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 34px;
width: 160px;
padding-right: 9px;
padding-left: 10px;
}

.acaixaproc2 {
width: 227px;
}

</style>

<form method="get" class="acaixaproc2" action="/search"><input type="text"  class="caixadetexto2" name="q" size="30" x-webkit-speech/>
<input type="submit" class="botprocura2" value=""/></form>

Buscador 3

<style>
.botprocura3 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 35px;
background-position-x: -181px;
background-position-y: -70px;
width: 45px;
cursor: pointer;
float: right;
}

.botprocura3:hover {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
background-position-x: -413px;
background-position-y: -70px;
}

.caixadetexto3 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 34px;
width: 160px;
padding-right: 9px;
padding-left: 10px;
}

.acaixaproc3 {
width: 227px;
}

</style>

<form method="get" class="acaixaproc3" action="/search"><input type="text"  class="caixadetexto3" name="q" size="30" x-webkit-speech/>
<input type="submit" class="botprocura3" value=""/></form>

Buscador 4

<style>
.botprocura4 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 35px;
background-position-x: -181px;
background-position-y: -105px;
width: 45px;
cursor: pointer;
float: right;
}

.botprocura4:hover {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
background-position-x: -413px;
background-position-y: -105px;
}

.caixadetexto4 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 34px;
width: 160px;
padding-right: 9px;
padding-left: 10px;
}

.acaixaproc4 {
width: 227px;
}

</style>

<form method="get" class="acaixaproc4" action="/search"><input type="text"  class="caixadetexto4" name="q" size="30" x-webkit-speech/>
<input type="submit" class="botprocura4" value=""/></form>

Buscador 5

<style>
.botprocura5 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 35px;
background-position-x: -181px;
background-position-y: -140px;
width: 45px;
cursor: pointer;
float: right;
}

.botprocura5:hover {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
background-position-x: -413px;
background-position-y: -140px;
}

.caixadetexto5 {
background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);
border: none;
height: 34px;
width: 160px;
padding-right: 9px;
padding-left: 10px;
}

.acaixaproc5 {
width: 227px;
}

</style>

<form method="get" class="acaixaproc5" action="/search"><input type="text"  class="caixadetexto5" name="q" size="30" x-webkit-speech/>
<input type="submit" class="botprocura5" value=""/></form>

Espero que tenham gostado de todos. Se gostou, deixe um comentário e mostre para seus
amigos o/.

Marcadores: , , ,

7 Comentários:

Às 10 de novembro de 2011 13:21 , Blogger Joao disse...

Muito bom!!
Como faço para mudar a cor do fundo da lupa?
Agradeço desde já

 
Às 11 de novembro de 2011 16:33 , Blogger Códigos Blogger disse...

É fácil, vamos pegae o botão 4 como exemplo.
Prucure por: .botprocura4:hover {
Abaixo dela tem uma linha de código assim:

background: url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png);

O valor desse background determina a cor do fundo do botão, porém, seu valor está como:

url(http://dl.dropbox.com/u/47734544/Buscadores/buscadores-com-reconhecimente-de-voz.png)

Como pode perceber, ali tem uma URL, que é a imagem de fundo do botão. Daí é só trocar aquela url por outra.

 
Às 12 de novembro de 2011 17:38 , Blogger BlogueiroBom disse...

Vlw pela dica. Coloquei no blog http://craquedoscracks.blogspot.com/ e funcionou.

 
Às 17 de novembro de 2011 19:30 , Blogger Beto dos Anjos disse...

Tentei colocar esse buscador no blog http://azinternacional.blogspot.com e nao funcionou. Mas valeu pela dica. Abraço.

 
Às 3 de janeiro de 2012 19:22 , Blogger Colorindo o 7 disse...

Este comentário foi removido pelo autor.

 
Às 1 de agosto de 2013 19:25 , Blogger Horácio Tenório disse...

Ficou bom mas, como faço para arrumar a lupa porque ela ficou abaixo da caixa de pesquisa

 
Às 29 de outubro de 2013 14:45 , Blogger Danillo Assis disse...

Conssegui arrumar a lupa mudando " width: 45px; " para "width: 44px;".

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial