Caixa de busca personalizada para blog


Neste tutorial vou ensinar como colocar uma caixa de busca personalizada no seu blog. Tenho outras formas de personalização de caixa de busca, mais está é a primeira que vou postar aqui no Quero Dicas.

A caixa de busca patrão do blog é muito sem graça e muitas vezes não combina com o template criado, então essa é uma dica muito legal para muda-la.
Faça um Backup do seu template, caso não goste e de preferencia em seu "template teste" Não sabe fazer Backup? Não tem problema clique aqui e aprenda.

      Passo 1 

Vá no editor de HTML do seu blog, , aperte Ctrl+F e pesquise por:

 ]]></b:skin> 

 Acima do código encontrado, cole o código:



       Passo 2

Agora, vá no "layout" do seu blog, Clique em "Adicione Gadgets" e selecione "html/JavaScript" e cole o código abaixo:

 
<form action="/SEARCH" class="SEARCH" method="GET">
<input class="SEARCHBAR" id="S" name="Q" placeholder="DIGITE O QUE PROCURA" type="TEXT" value="" /> <input class="SEARCHBUT" type="SUBMIT" value="" /> </form>

  

      Personalizando a caixa

Para personalizar você terá que entrar novamente no HTML do seu blog, como escrito acima.
As partes em destaque, vermelho, é onde você pode personalizar.
São elas:

1 - FONT-FAMILY: ARIAL
2 - HEIGHT: 20PX  e WIDTH: 120PX
3 - COLOR:#000000
4 - BACKGROUND: #006400 
5 - BOX-SHADOW: INSET 1PX 1PX 6PX  #DCDCDC
6 - FONT: 11PX ARIAL
7 - BORDER: 2PX SOLID  #000000
8 - BACKGROUND: URL DA IMAGEM ('URL DO BOTÃO)
9 - WIDTH: 27PX
10 - HEIGHT: 20PX
11 - BACKGROUND: URL DA IMAGEM ('URL DO BOTÃO HOVER');
12 - WIDTH: 27PX; - LARGURA DO BOTÃO
13 - HEIGHT: 20PX; - ALTURA DO BOTÃO

Tabela de cores: AQUI
Observação: a palavra URL DA IMAGEM que aparece no código "butão e butão hover", é onde você deverá colocar o link da imagem hospedada.
Caso tenha dúvidas em hospedagem de imagens, veja estas postagens:

► Como hospedar uma imagem gratuitamente na Web para seu blog
► Como hospedar suas imagens no seu próprio blog

Espero que tenha gostado! Se puder deixe seus comentários 
Beijinhos

Esta caixa de pesquisa, tem os créditos do blog Pequena Garota
COMPARTILHE :  

Comentários
2 Comentários

2 comentários

avatar
admin
segunda-feira, 23 novembro, 2015 ×

O meu botão está ficando cinza???

Resposta
avatar
admin
terça-feira, 24 novembro, 2015 ×

Olá Kellen. Troque pela cor que deseja

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.