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