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

► +A +/- -A
Olá Querido leitor! Hoje vamos estrear a caixa de busca versão 3 disponibilizada aqui, uma caixa de busca feita com bastante elegância, e com efeitos muito bons e fantásticos, essa caixa de pesquisa é banstante utilizável durante uma busca, pois ela possui o fantástico reconhecimento de voz, aonde tudo oque você falar, pelo microfone, ou até Web-CAM (Que possuem microfone embutido) ela irá inserir um texto na caixa de busca e então é só você fazer sua pesquisa facilmente com este recurso. Enfim, vamos ao Tutorial?

1º Passo - Instalando o CSS da busca

Vamos a instalação do CSS da caixa de busca!
1. Faça o 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 dele adicione o seguinte código:

div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 14px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 263px;
top: 10 px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}


Agora vamos ao segundo passo!


2º passo - Utilizando a busca em seu 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:


<form action='/search' class='search' method='get'>
<div class='search-form'>
<label class='search-label-sliding' for='search-sliding' style='left: 15px; opacity: 0.4;'></label>
<input class='search-sliding' id='search-sliding' name='q' onblur='if (this.value == "") {this.value = "pesquisar";}' onfocus='if (this.value == "pesquisar") {this.value = ""}' title='Pesquisar post' type='text'x-webkit-speech="x-webkit-speech" value='Pesquisar'/>
<input class='search-button' src='http://1.bp.blogspot.com/_Zuzii37VUO4/TYq4Kue_QwI/AAAAAAAAFkQ/tQUrOpAJe6g/s000/transparent.gif' type='image'/>
</div>
</form>

Pronto terminamos, fácil né?
Bom, até mais, fiquem com Deus!
Abraços e até a próxima! 

► Postagens Relacionadas:

24 Comentários

Highlander disse...

Muito boa essa caixa de busca!

6 de junho de 2012 22:17
Caio Vinicius disse...

Olá Highlander, Obrigado pelo comentário e pela visita, ficamos grato.
Abraços e Fica Com Deus!

7 de junho de 2012 10:07
Anônimo disse...

É MENTIRA ESSE NEGÓCIO DE RECONHECIMENTO DE FALA!

18 de junho de 2012 05:53
Pietro disse...

Anônimo, o reconhecimento de fala só funciona com o navegador Google Chrome.

18 de junho de 2012 05:54
Caio Vinicius disse...

Isso mesmo "Anônimo" ele só funciona no Google Chrome!

18 de junho de 2012 05:55
Jackson Soares disse...

Achei muito bom seus tutoriais só acho que falta imagens ou demos dos gadgets.


Eu não irei experimentar pois não sei qual será o resultado final.


Sucesso aqui no blog.

16 de julho de 2012 12:39
Caio Vinicius disse...

Olá Jackson Soares, me desculpe por ter postado nenhuma imagem ou algo do tipo, mas não se preocupe nos meu próximos tutoriais estarei postando Demos, Abraços e Fica com Deus!

16 de julho de 2012 14:50
Jackson Soares disse...

Olá Caio, não precisa pedir desculpas seu conteúdo é de altíssima qualidade e irei usar muitos dos tutoriais disponíveis aqui para melhorar alguns templates.


Fique na paz.

16 de julho de 2012 17:06
Caio Vinicius disse...

Que bom Jackson e Obrigado pelo elogio aos meu tutoriais eu digo o mesmo ao seus, Até mais.
Um abraço!

17 de julho de 2012 08:05
Vanda Ferreira disse...

Simplesmente adorei!! Principalmente que funciona com o microfone!! Tudo de bom =))))

17 de julho de 2012 15:24
Vanda Ferreira disse...

Mentira nada, deu certinho aqui!!!!!!

17 de julho de 2012 15:24
Caio Vinicius disse...

Olá Vanda! Que bom que você gostou! Isso mesmo ele funciona com microfone :D! Até mais, Ficamos grato pela sua participação Abraços!

17 de julho de 2012 16:12
Caio Vinicius disse...

Viu Anônimo, eles estão de prova!

17 de julho de 2012 16:14
Gustavo Dal'Evedove Pironi disse...

olá, muito interessante e bonita essa caixa de pesquisa, entretanto ela não adquire o css em meu blog oficial. Se alguém que entenda sobre isso puder me explicar se está ocorrendo algum conflito agradeço.

21 de julho de 2012 14:41
Caio Vinicius disse...

Olá Gustavo, estava analisando seu Blog e o CSS do mesmo e supostamente o CSS do seu blog pode estar quebrado, e para arrumar isto você teria que olhar detalhadamente cada parte do seu CSS ou até trocar o Layout, mas existe uma forma, Tente colar o código:


div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 14px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 263px;
top: 10 px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}


ACIMA de com as tag de abertura e fechamento e


Ou seja ficará assim:



div.search-form {
right: 0px;
top: -71px;
display: block;
width: 282px;
height: 45px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top right no-repeat;
}
div.search-form .search-sliding {
position: relative;
top: 11px;
left: 14px;
border: none;
background: none;
width: 220px;
font-style: italic;
color: #999;
height: 27px;
}
div.search-form .search-label-sliding {
position:absolute;
top:34px;
left:-4000px;
}
div.search-form .search-button {
position: absolute;
left: 263px;
top: 10 px;
background: url(https://lh3.googleusercontent.com/-nPJQAv57wOw/T5TKdK3q5HI/AAAAAAAAA4U/pCfSM3sLXsY/s0/pesquisa.png) top left;
width: 55px;
height: 45px;
}
div.search-form .search-button:hover {
background-position:-55px 0;transition: all 0.4s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.4s ease;-o-transition: all 0.3s ease;transition: all 0.4s ease;
}
div.search-form .search-button:active {
background-position:-55px 0; -webkit-transition: all .8s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.5s ease;transition: all 0.6s ease;
-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8); -webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;
div.search-form .search-button a {
background-position:-55px 0;
margin:1px 0 0 1px;
}




Tente isso, caso não funcione, me informe!
Abraços.


Obs: Lembre-se que é para colar o código com as tags de abertura e fechamento Acima de Como falei mais acima.

21 de julho de 2012 15:43
Caio Vinicius disse...

Olá Gustavo, Visitei seu blog e o CSS do mesmo, e vi que a caixa de pesquisa não se adaptava, então supostamente seu blog pode estar com o CSS quebrado ou seja nenhum CSS irá funcionar ao se colado acima da tag ]]>.

21 de julho de 2012 15:46
Nathali Corsi disse...

Oi, tem outros estilos de caixa? o amarelo e preto não combinam muito com o template do meu blog, eu tentei criar uma imagem diferente para colocar lá mas não dá, você sabe se tem outros estilos?? Obrigada!!

21 de julho de 2012 22:56
minimorsa disse...

Olá Caio, muito obrigado pela dica, funcionou perfeitamente, ficou muito bonita. Sem querer te atrapalhar, mas já atrapalhando um pouco, você poderia me dizer onde aprendeu html e css, sei um pouco só pelo que observo e gostaria de saber se você conhece algum curso ou técnica para aprender. Sua resposta a meu comentário me fez entender porque meu menu não adquiria o css perfeitamente.

27 de julho de 2012 12:48
Caio Vinicius disse...

Olá "minimorsa" Fico muito Grato pelo seus elogios ao Tecnoblog e aos tutoriais. Agora em quanto ao e como aprendi CSS foi bastante difícil (coisa de 1 ano) mas aprendi visitando sites do meu nicho (Blogger) e vendo tutoriais, e também tinha um amigo que me ajudava muito, mas depois aprendi tudo sozinho, irei te mostrar alguns metablogs em que aprendi várias coisas de CSS:


1° - http://www.blogandocomfacilidade.com/
2° - http://www.mundoblogger.com.br/
3° - http://bloggandonaweb.blogspot.com.br


Entre outros, mas esses foram os principais, recomendo que pesquise bastante sobre HTML e CSS!


Abraços Amigo Fica com Deus.
Sucesso!

27 de julho de 2012 15:05
minimorsa disse...

muito obrigado por recomendar-me esses metablogs, não os conhecia, mas só de olhar os posts na página inicial acabei gostando. São tão bons quanto seu blog.

27 de julho de 2012 17:59
Juliano Silveira disse...

Nossa, a melhor caixa de pesquisa que eu já encontrei! Brigadu!!!

15 de dezembro de 2012 01:14
Caio Vinicius disse...

De nada Juliano! :D

28 de dezembro de 2012 13:01
Caio Vinicius disse...

Nathali, em breve eu atualiza-rei a post e estarei disponibilizando os outros devidos modelos, Obrigado pela sugestão! Fica com Deus!

28 de dezembro de 2012 13:02
Site Official Dançarino GD disse...

só queria saber se precisa enter depois ou antes da tag procurada?

23 de janeiro de 2013 16:27

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!