Formulário de contato expansível no Blogger

Ter um formulário de contato no blogger é muito importante e já o torna bem mais profissional, imagina se tiver um formulário dinâmico, prático e chamativo? Decidi ensinar a vocês uma técnica de nível avançado que poucos aplicam em blogs
, mas não se preocupe, é bem fácil!

Se trata de um conteúdo se esconder e aparecer conforme você clica no botão, evitando assim, ter de mudar de página e ficando bem interessante.

VEJA UMA DEMONTRAÇÃO

(clique no botão de contato a direita)

Lembrando que estou passando só um exemplo de aplicação da técnica - que acho mais interessante -, mas você pode usá-la como bem quiser.

1 - Adicionar link (botão)

Primeiramente, precisamos criar um link que a pessoa possa clicar para abrir ou fechar a caixa de contato. No nosso caso, vamos criar um botão fixo, mas se pode aplicar até com link já prontos do blogger, se alguém desejar essa opção, deixe um comentário aqui em baixo que ensinarei!

Enfim, vamos lá!

Entre em Layout, e clique em Adicionar Gadget em qualquer lugar (quanto mais "escondido" melhor). Escolha a opção HTML/ JavaScript e cole o seguinte código:

<a href="#" id="botao_contato" style="position:fixed; top:200px; left:5px;">
  <img src="http://www.concrelit.com.br/site/images/contato.png" style="width:50px;height:auto;" />
</a>

EXPLICANDO O CÓDIGO, o que está em azul é o ID do link, que vamos usar como referencia no jQuery. O que está verde é o estilo do link; nele está definido que será fixo, e as distâncias das margens, edite como quiser. O que está em laranja é o endereço da imagem que aparecerá para ser clicada. O que está em...azul-marinho(?) é o estilo (tamanho) da imagem.

Você pode criar o link como e onde quiser, só é preciso que o ID "botao_contato" seja adicionado a ele.

Salve, visualize e prossiga.

2 - Adicionar gadget do Formulário de Contato

Agora, temos que colocar no blog o formulário de contato tradicional do Blogger. 

Novamente, vá em Layout, clique em Adicionar Gadget, clique na aba Mais Gadgets e procure por Formulário de Contato. Achando-o, clique, atribua um título e salve.

Um formulário deverá aparecer no local em que você adicionou o gadget.

3 - CSS: Aplicar estilos ao formulário

Para estilizarmos o nosso formulário, precisamos adicionar o código CSS.

Vá em Modelo > Editar Modelo e procure por ]]></b:skin>. Logo ACIMA cole o seguinte código:

/*-- Formulário de Contato Expansível por Íntegra Studio ---*/

#ContactForm1{/*esse deve ser o id do seu gadget*/
    position: fixed; /* faz com que fique fixo na página */
    top:270px; /* distância do topo */
    left:10px; /*distancia da esquerda */
    background:#000; /* plano de fundo */
    padding: 20px; /* margem interna*/
    color:#fff; /* cor do texto*/
    /* sombra */
    -webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.6);
  /*ADICIONE AQUI O DISPLAY NONE*/
}

O código já está explicado nos próprios comentários, qualquer dúvida poste aqui.

Vá editando seu formulário e visualizando, quando estiver satisfeito, cole o seguinte código no lugar de /*ADICIONE AQUI O DISPLAY NONE*/ :

display:none;

Isso fará com que a caixa de contato fique invisível até ser clicada.

4 - jQuery: Fazer caixa "abrir e fechar"

Agora, o muito essencial script que faz com que a caixa apareça quando clicar e desapareça quando clicar novamente.

Procure por </head> e cole logo a ACIMA:

<script src='http://code.jquery.com/jquery-1.9.1.min.js'> </script><!-- adiciona biblioteca jquery --><script type='text/javascript'>
$(document).ready(function() {
    $("#botao_contato").click(function(){
$("#ContactForm1").toggle("fast");
    });
});
</script>

EXPLICANDO, primeiro incluímos a biblioteca do jQuery no arquivo, depois digo que quando o elemento #botao_contato for clicado o elemento #ContactForm1 será exibido ou ocultado.

E está pronto! Simples e útil não? Aplique essa estratégia em outros elementos, é bem interessante. Tentarei estar ensinando mais exemplos de utilização dela.

E se gostou, por favor compartilhe, curta e nos siga nas redes sociais, estamos sempre postando assuntos de seu interesse!

NÃO PLAGIE ! DÊ CRÉDITOS E REFERÊNCIAS!

Compartilhe essa postagem!