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!
23 Comentários
Muito boa essa caixa de busca!
6 de junho de 2012 às 22:17Olá Highlander, Obrigado pelo comentário e pela visita, ficamos grato.
7 de junho de 2012 às 10:07Abraços e Fica Com Deus!
É MENTIRA ESSE NEGÓCIO DE RECONHECIMENTO DE FALA!
18 de junho de 2012 às 05:53Anônimo, o reconhecimento de fala só funciona com o navegador Google Chrome.
18 de junho de 2012 às 05:54Isso mesmo "Anônimo" ele só funciona no Google Chrome!
18 de junho de 2012 às 05:55Achei muito bom seus tutoriais só acho que falta imagens ou demos dos gadgets.
16 de julho de 2012 às 12:39Eu não irei experimentar pois não sei qual será o resultado final.
Sucesso aqui no blog.
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 às 14:50Olá 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.
16 de julho de 2012 às 17:06Fique na paz.
Que bom Jackson e Obrigado pelo elogio aos meu tutoriais eu digo o mesmo ao seus, Até mais.
17 de julho de 2012 às 08:05Um abraço!
Simplesmente adorei!! Principalmente que funciona com o microfone!! Tudo de bom =))))
17 de julho de 2012 às 15:24Mentira nada, deu certinho aqui!!!!!!
17 de julho de 2012 às 15:24Olá 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 às 16:12Viu Anônimo, eles estão de prova!
17 de julho de 2012 às 16:14olá, 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 às 14:41Olá 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 às 15:46Oi, 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 às 22:56Olá 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 às 12:48Olá "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:
27 de julho de 2012 às 15:051° - 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!
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 às 17:59Nossa, a melhor caixa de pesquisa que eu já encontrei! Brigadu!!!
15 de dezembro de 2012 às 01:14De nada Juliano! :D
28 de dezembro de 2012 às 13:01Nathali, 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 às 13:02só queria saber se precisa enter depois ou antes da tag procurada?
23 de janeiro de 2013 às 16:27Postar 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!