Saiba como colocar formulário flutuante de contato.

Você quer saber com colocar formulário de contato flutuante no blog?
Saiba como!
 Se você tem um blog  (blogger ) e quer colocar um formulário de flutuação de contato que fica no canto do blog para que seus clientes possa te enviar enviar um e-mail de consulta rápida para o apoio para encontrar algumas informações que deseja.
Siga corretamente o tutorial.

Ir para Blogger Template >> >> Editar HTML >> Clique em qualquer lugar do editor de modelo HTML e pressione ( CTRL + F ), o que permitirá uma caixa de pesquisa. Agora, procure por tag pele e logo acima dele cole o seguinte folha de códigos de estilo CSS.

# MBL-contact .ContactForm { 
    margin: 0px importante!; 
} 
# MBL-contact .contact-form-botão de enviar { 
    max-width: none; 
    width: 100%; 
    height: 35px; 
    border: 0; 
    background-image: none; 
    background-color: # FA411E; 
    cursor: pointer; 
    font: 13px Normal Normal Abertas Sans; 
    font-style: normal; 
    font-weight: 400; 
} 
. # MBL-contact-form-botão-.contact apresentar: hover { 
    background-color: # 222; 
    background-image: none; 
    border: 0; 
} 
# MBL-contact #contact { 
    position: fixed; 
    bottom: 0; 
    direita: 1%; 
    background-color: #EEE; 
    color: # 555; 
    width: 300px; 
    z-index: 1.0E + 15; 
} 
# MBL-contact #contact .contact-form-widget { 
    padding: 30px; 
    display: none; 
} 
# MBL-contact #contact { 
    position: fixed; 
    bottom: 0 ; 
    direita: 1%; 
    background-color: #EEE; 
    color: # 555; 
    width: 300px; 
    z-index: 1.0E + 15; 
} 
# MBL-contact #contact h2.title { 
    margin: 0px; 
    font-weight: 400; 
    background-color: # FA411E; 
    color: #FFF; 
    padding: 8px 15px; 
    font-size: 16px; 
    cursor: pointer; 
    letter-spacing: 3px; 
    text-align: center; 
} 
# MBL-contact #contact h2. título .fa { 
    position: absolute; 
    left: 10px; 
    top: 12px; 
} 
# MBL-contact #contact .contact-form-widget { 
    width: 240px; 
    padding: 30px; 
    display: none; 
} 
# MBL-contact #contact * { 
    transição: tudo 0 facilidade; 
    -webkit-transição: tudo 0 facilidade; 
    -moz-transição: tudo 0 facilidade; 
    -o-transição: tudo 0 facilidade; 
} 
# MBL-contact #contact .contact-form-nome, # contact {-.contact-Email, # contact .contact-form-email-mensagem 
    :; background-color #DDD 
    :; # 111 cor 
    border: 0; 
    padding: 10px 5px; 
    font: 13px Normal Normal Sans abertos; 
} 
#mbl -Contato-form-nome .contact, .contact-form-mail, forma-.contact-email-mensagem, .contact-form-widget { 
    max-width: none; 
    margin-bottom: 15px; 
}
tag e logo abaixo cole o seguinte codificação, que consiste de um contato nos widget e JavaScript que vai fazer o contato nos o widget flutuante através de seu site.
'ContactForm'

</ h2> </ b: if>
class =
<'botão de contato-form-botão de contato-form-submit' input class = expr: dados id = ': widget. instanceId + & quot; forma-_contact-submit & quot; ' expr: value = 'data: contactFormSendMsg' type = 'botão' />
// <! [CDATA [ $ ("#contact h2.title") .click (function () {$ ("#contact .contact-form-widget") .toggle ("fast ");}); //]]></ script>

Agora, com a ajuda da caixa de pesquisa, procure a partida <body> tag e logo abaixo cole o seguinte codificação, que consiste de um contato nos widget e JavaScript que vai fazer o contato nos o widget flutuante através de seu site.
<Div id = "MBL-contact"> 
<b: section class = "contato" id = "contato" maxwidgets = "1" showaddelement = "sim"> 
    <b: id = Widget bloqueado = título 'true' 'ContactForm2' = 'Fale conosco' type => 'ContactForm' 
      <b: includable id = 'main'> 
  <b: if 'dados!: title = & quot; & quot;' = cond> 
    <h2 class = 'title'> <i classe = 'fa fa-paper-plane' /> <data: title /> </ h2> 
  </ b: if> 
  <div 'contato de forma-widget "> class = 
    <div class = "forma"> 
      <nome do formulário = 'contact-form> 
        <input class = 'contato-form-name' expr: id = 'data: widget.instanceId + & quot; _contact-form-nome & quot;' expr: espaço reservado = 'data: contactFormNameMsg' name = size 'nome' = '30 'type =' text 'value =' '/> 
        <input class = 'contato-form-mail' expr: dados id = ': widget. instanceId + & quot; _contact-form-mail & quot; ' expr: espaço reservado = 'data: contactFormEmailMsg' name = 'email' size = '30 'type =' 'value =' text '/> 
        <class = textarea cols "contato-form-email-message '= '25' expr: id = 'data: widget.instanceId + & quot;-_contact-form-mail mensagem & quot;' expr: espaço reservado = 'data: contactFormMessageMsg' name = 'e-mail message' linhas = '5' /> 
        <'botão de contato-form-botão de contato-form-submit' input class = expr: dados id = ': widget. instanceId + & quot; forma-_contact-submit & quot; ' expr: value = 'data: contactFormSendMsg' type = 'botão' /> 
        <div style = "text-align: center; max-width: 222px;width: 100% "> 
          <p class = "contato-form-error-message 'expr: id =' data: widget.instanceId + & quot; forma-_contact-de mensagem de erro & quot; '/> 
          <p class = 'por contacto form-sucesso-mensagem 'expr: id =' data: widget.instanceId + type = 'text / javascript ">  // <! [CDATA [ $ ("#contact h2.title") .click (function () {$ ("#contact .contact-form-widget") .toggle ("fast ");});    //]]></ script>

 Depois de ter feito isso clique no botão salvar modelo e prontinmho.
Parabéns, você adicionou com sucesso uma flutuação entre em contato conosco widget no blogger. 

0 comentários