Caixa de busca personalizada para blog | Quero Dicas | Tutoriais para seu blogs


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 nosso 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 abaixo:

 

.SEARCH{
FLOAT: LEFT;
FONT-FAMILY: ARIAL !IMPORTANT;}
.SEARCHBAR{
HEIGHT: 20PX; /*ALTURA DA CAIXA*/
WIDTH: 120PX; /*LARGURA DA CAIXA*/
TEXT-ALIGN:CENTER;
COLOR:#000000CORFONTE;
BACKGROUND: # BACKGROUND!IMPORTANT;
BOX-SHADOW: INSET 1PX 1PX 6PX  #DCDCDC;
FONT: 11PX ARIAL !IMPORTANT;
BORDER: 2PX SOLID  #000000;
-WEBKIT-BORDER-RADIUS: 10PX;
-MOZ-BORDER-RADIUS: 10PX;
BORDER-RADIUS: 10PX;
}
.SEARCHBUT{
BACKGROUND: URL DA IMAGEM('URL DO BOTÃO');
WIDTH:27PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0;
PADDING:2PX;
}
.SEARCHBUT:HOVER{
BACKGROUND: URL DA IMAGEM('URL DO BOTÃO HOVER');
WIDTH:27PX; /*LARGURA DO BOTÃO*/
HEIGHT:20PX; /*ALTURA DO BOTÃO*/
BORDER: 0;
PADDING:2PX; 

 
 


       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 - UFPA

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 Me Contrate!

2 comentários

Clique e deixe seu comentários
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
avatar
admin


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

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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