Olá Pessoal, depois de um bom tempo sem postar aqui no TB, venho hoje, neste tutorial os ensinando como adicionar/instalar uma fantástica caixa de pesquisa em seu Blog, as caixas de pesquisar, ajudam o leitor/visitante a fazer pesquisas e explorar seu blog com mais facilidade. Então vamos instalar a caixa de pesquisa em seu blog, siga os passos do tutorial no decorrer do post, então vamos ao tutorial!
Demonstração da Caixa de busca em imagem:
Demonstração da Caixa de busca em imagem:
Instalando o CSS em Seu blog
1. Primeiramente faça o login no Blogger
2. Em seguida no menu suspenso, clique em Modelo
3. Em seguida na página que se abrirá clique em Editar HTML
4. E Procure pela seguinte linha no seu blog:
]]></b:skin>
5. E Acima da Tag citada, adicione o seguinte código:
.sidebar .busca {
margin:0 0 4px 0;
overflow:hidden;
}
.sidebar .busca .pesquisa {
background:#efefef;
border:1px solid #dfdfdf;
float:left;
width:200px;
padding:7px;
}
.sidebar .busca .pesquisa:focus {
background:#fff;
text-decoration:none;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.sidebar .busca .button {
float:right;
margin:1px 0 0 0;
}
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 nome campo do Gadget adicione o seguinte código HTML:
<div class="sidebar">
<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></div>
Pronto, Terminamos o Post.
Gostou? Possui alguma duvida? Então não deixe de comentar!
Até mais Pessoal, Fiquem Com Deus!
22 Comentários
Olá Caio, Eu curti muito essa busca personalizada, a post ficou muito bem explicada. Mas tenho uma duvida não sendo dessa post, mas queira que você me ajudasse a remover uma borda amarela que quando clico na caixa ela aparece, tirando o foco do efeito dela, espero a sua resposta.
2 de maio de 2012 às 08:47Olá Marlon, Fico grato, por receber um elogio, Obrigado pela participação e Obrigado pelo comentário, e será um prazer ajuda-lo, e por incrível que pareça eu fiz um artigo aqui no TB, justamente tirando sua duvida, segue o link abaixo:
2 de maio de 2012 às 08:54http://tecnoblog789.blogspot.com.br/2012/01/outline-como-remove-lo-do-seu-blog.html
Espero Ter ajudado, Até mais!
Obrigado Caio, Deu Certo no meu Blog, Gostei, Até que enfim hahahaha, Falow manin!
2 de maio de 2012 às 13:04Deu certo Caio, Valeu manin! Comentei lá nessa sua post!
2 de maio de 2012 às 13:06Obrigado Marlon, Fica com Deus!
3 de maio de 2012 às 13:55Olá Caio.
3 de maio de 2012 às 20:47Muito bom seu artigo.
queria saber se você mim ajudasse a colocar essa caixa para html ( code ) que você utiliza eu seus tutoriais, ficaria muito agradecido.
Abraços!
Olá, Obrigado pelo comentário Herlan, eu não entendi bem oque você quis dizer, por favor, explique-me melhor e te ajudarei como posso, Obrigado por sua participação em nossos posts, fico grato.
4 de maio de 2012 às 07:44Abraços!
Espero sua resposta.
Olá Caio.
4 de maio de 2012 às 19:43Essa caixa onde você coloca os códigos de seus tutoriais.
por exemplo para a tag ]]> ficou uma caixa com borda e para códigos maiores ele fica com a barra de rolagem, essa caixa que você usa e usou nesse tutorial.
Olá Herlan, Agora sim te ajudarei, Isso é muito fácil, mas é bem fácil adiciona-lo em seu blog, por isso irei pedir a você um E-mail de contato, para que eu possa o lhe ensinar passo-a-passo de como adiçona-lo em seu blog, estou pedindo isso para evitar o excesso de comentários, não é mesmo :D! Abraços amigo!
4 de maio de 2012 às 20:59Espero Sua resposta!
Olá Caio, pode enviar para meu email: herlanss@hotmail.com
5 de maio de 2012 às 15:59Abraços!
Obrigado Herlan, Você receberá o E-mail em Breve!
5 de maio de 2012 às 16:18òtimo Post caio, interessante e bonita a caixa ... :D
9 de maio de 2012 às 08:24Olá Daniel, Que bom que gostou, Obrigado pelo comentário e Volte Sempre!
9 de maio de 2012 às 08:33Abraços!
Não há de quê , voltarei sim!
9 de maio de 2012 às 09:02^^
Obrigado Amigo!
9 de maio de 2012 às 14:04Olá Herlan
12 de maio de 2012 às 07:21Para adicionar em HTML, basta copiar o primeiro conteudo na sua folha de estilos css ou entre as tag <style type="text/css></style></head>. O segundo na pagina HTML, no lugar onde quer que apareça a caixa de pesquisa.
Abs.
O codigo ficou bagunçado. O primeiro conteudo entre as tags "style type="text/css" e "/style".
12 de maio de 2012 às 07:23Olá Rodrigo, Na realidade ele queria adicionar o blockquote ao seu blog, devido a isso eu o enviei um E-mail de como adiciona-lo em seu Blog.
12 de maio de 2012 às 07:42Fico Grato pela compreensão.
Até mais, Fica com Deus.
Olá Herlan, Agora sim te ajudarei, Isso é muito fácil, mas é bem fácil adiciona-lo em seu blog, por isso irei pedir a você um E-mail de contato, para que eu possa o lhe ensinar passo-a-passo de como adiçona-lo em seu blog, estou pedindo isso para evitar o excesso de comentários, não é mesmo :D! Abraços amigo!
12 de maio de 2012 às 07:46Espero Sua resposta!
Olá Rodrigo.
17 de maio de 2012 às 13:45Obrigado por tentar ajudar, mas o Caio já me forneceu o código do blockquote, que era o que eu estava procurando.
Abraços!
Parabens muito bom esse seu post, mais estou com um probleminha. Quando coloco essa caixa a imagens da lupa fica para um lado e a caixa para outro e queria saber como resolver isso.
9 de outubro de 2012 às 20:55A imagens da lupa fica bem afastada da caixa de pesquisa e quando eu faço um busca usando ela ele volta para a página inicial. Me ajude por favor. Obrigado desde já.
Olá "NãoSei" Para resolver esse problema você deve ajustar as "margens do seu blog" ou a barra lateral, ou o CSS que passei no passo 5 do primeiro passo é só você ajustar width e padding.
3 de novembro de 2012 às 19:05Postar 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!