Pages

Formulário de contato deslizante blogger

Olá queridos, tudo bem?

Hoje eu trago pra você um tutorial bem bacana que explica como colocar um formulário de contato deslizante para blogger. Ele fica tipo aqueles atendimentos via chat sabe, que você clica e sobe a telinha. Ele é mais comum em lojas virtuais, porém, ao invés do atendimento ser imediato, nesse caso aqui é enviado um email que será respondido posteriormente.

Vamos lá aprender?

1. Para adicionar vá em blogger > modelo > editar html > ctrl F e localize a tag ]]></b:skin> e coloque o seguinte código acima dela.

/*Floating Contact Form by BloggerItems.com*/.ContactForm, .ContactForm .title { display: none;}.floating-ct { position: fixed; width: 250px; right: 0; bottom: 0; z-index: 999;}.floating-ct-head a { padding: 5px 10px; background: #09f; color: white; font-weight: bold; display: inline-block; *display: block; zoom: 1;}.floating-ct-body { height: 285px; background: white; border: 1px solid #09f; padding: 10px; display: none;}.floating-ct-head { text-align: right;}.floating-ct-body .ContactForm { margin: 0; display: block!important;}
4.  Agora localize a tag </body> e coloque o seguinte código antes dela:


<script type='text/javascript'>//<![CDATA[/*Floating Contact Form by BloggerItems.com*/$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');$('.ContactForm').appendTo('.floating-ct-body');var slide_up_ct = false;$('.floating-ct-head a').click(function(){ if (!slide_up_ct) { slide_up_ct = true; $('.floating-ct-body').slideDown(); } else { slide_up_ct = false; $('.floating-ct-body').slideUp(); }});//]]></script>
Lembre-se que o gadget Formulário de contato deve estar instalado em seu blog.

Salve e está pronto!

Fonte: https://sneeit.com/

Nenhum comentário:

Postar um comentário