Caixa de busca personalizada para blog | Quero Dicas

Quero Dicas : Caixa de busca personalizada para blog

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


2 comentários:

Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

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.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir