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

► +A +/- -A
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:


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;
Em Width você muda a largura da caixa de texto de acordo desejado, em alguns casos, será preciso testar separadamente cada tipo de largura, na qual ficará mais justa ao seu blog, Agora em Padding, você irá ajustar a distância entre o conteúdo de determinado elemento e sua borda.

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>
O Elemento Destacado de Laranja, será aonde você terá que adicionar a URL do seu Blog.

Pronto, Terminamos o Post.
Gostou? Possui alguma duvida? Então não deixe de comentar!
Até mais Pessoal, Fiquem Com Deus!

► Postagens Relacionadas:

22 Comentários

Marlon disse...

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 08:47
Caio Vinicius disse...

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

http://tecnoblog789.blogspot.com.br/2012/01/outline-como-remove-lo-do-seu-blog.html

Espero Ter ajudado, Até mais!

2 de maio de 2012 08:54
Marlon_tas disse...

Obrigado Caio, Deu Certo no meu Blog, Gostei, Até que enfim hahahaha, Falow manin!

2 de maio de 2012 13:04
Marlon disse...

Deu certo Caio, Valeu manin! Comentei lá nessa sua post!

2 de maio de 2012 13:06
Caio Vinicius disse...

Obrigado Marlon, Fica com Deus!

3 de maio de 2012 13:55
Herlan Santos disse...

Olá Caio.
Muito 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!

3 de maio de 2012 20:47
Caio Vinicius disse...

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.
Abraços!
Espero sua resposta.

4 de maio de 2012 07:44
Herlan Santos disse...

Olá Caio.
Essa 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.

4 de maio de 2012 19:43
Caio Vinicius disse...

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!
Espero Sua resposta!

4 de maio de 2012 20:59
Herlan Santos disse...

Olá Caio, pode enviar para meu email: herlanss@hotmail.com
Abraços!

5 de maio de 2012 15:59
Caio Vinicius disse...

Obrigado Herlan, Você receberá o E-mail em Breve!

5 de maio de 2012 16:18
Daniel Silva disse...

òtimo Post caio, interessante e bonita a caixa ... :D

9 de maio de 2012 08:24
Caio Vinicius disse...

Olá Daniel, Que bom que gostou, Obrigado pelo comentário e Volte Sempre!
Abraços!

9 de maio de 2012 08:33
Daniel Silva disse...

Não há de quê , voltarei sim!
^^

9 de maio de 2012 09:02
Caio Vinicius disse...

Obrigado Amigo!

9 de maio de 2012 14:04
Rodrigo Zandonadi disse...

Olá Herlan

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

12 de maio de 2012 07:21
Rodrigo Zandonadi disse...

O codigo ficou bagunçado. O primeiro conteudo entre as tags "style type="text/css" e "/style".

12 de maio de 2012 07:23
Caio Vinicius disse...

Olá 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.
Fico Grato pela compreensão.
Até mais, Fica com Deus.

12 de maio de 2012 07:42
Caio Vinicius disse...

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!
Espero Sua resposta!

12 de maio de 2012 07:46
Herlan Santos disse...

Olá Rodrigo.
Obrigado por tentar ajudar, mas o Caio já me forneceu o código do blockquote, que era o que eu estava procurando.
Abraços!

17 de maio de 2012 13:45
NãoSei disse...

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.

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

9 de outubro de 2012 20:55
Caio Vinicius disse...

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 19:05

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!