Como criar a página Fale conosco no Blogger

maio 05, 2020

O Blogger é muito robusto e fácil de operar na plataforma CMS, você não precisa ser um nerd para operar o painel ou as configurações. Mas com facilidade, existem algumas limitações. Por padrão, você não pode criar uma página Entre em contato, você precisa usar qualquer plug-in de terceiros ou ajustar o widget de contato oficial do blogueiro, para que ele possa trabalhar em páginas estáticas . Criar uma página separada para fins de contato é muito profissional e também limpa seu blog, ocultando widgets e plug-ins desnecessários. Portanto, vamos seguir em frente e ver Como criar a página Fale conosco no Blogger .

Primeiro passo:

Ocultando o widget ( Adicionando CSS )

Antes de editar, recomendamos que você faça um backup do seu modelo, para que tudo dê errado, você ainda tem o design do seu blog seguro.

A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger e acessar >> Modelos >> Editar HTML e procurar o final ]]> </ b: skin> e, logo acima, colar o código a seguir.

CSS.sidebar .widget.ContactForm {
    display: none!important;
}

Criando uma página ( adicionando HTML )

Antes de editar, recomendamos que você faça um backup do seu modelo, para que tudo dê errado, você ainda tem o design do seu blog seguro.

A primeira coisa que você precisa fazer é fazer login na sua conta do Blogger e acessar >> Modelos >> Editar HTML e procurar o final ]]> </ b: skin> e, logo acima, colar o código a seguir.

HTML<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

Conclusão

Parabéns !! Você conseguiu. agora você aprendeu que como criar a página Fale conosco no Blogger Visite o seu blog e verifique o incrível widget ao vivo em ação. Esta é a parte III do tutorial. Espero que tenha gostado deste tutorial. Se você gostou, compartilhe-o com o seu amigos, estamos trabalhando duro para desenvolver mais widgets incríveis, fique ligado conosco.