25 julho 2014

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 esta será a primeira que vou postar aqui no Quero Dicas. 😉

A caixa de busca patrão do blog é muito sem graça, podendo dizer, muito feia e muitas vezes não combina com o nosso template criado. Então, talvez, essa é uma dica muito legal para você conseguir mudá-la.
Faça um Backup do seu template e de preferências a "templates de testes", caso não goste. 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 "botão e botão hover", é onde você deverá colocar o link da imagem hospedada.


Caso tenha dúvidas em hospedagem de imagens, veja essas 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

2 comentários:

Amigos do Blog



Agregadores