Anonymous Hacker

  • Como criar a página Fale conosco no Blogger

    Como criar a página Fale conosco no Blogger

    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.


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