Home » Como criar a página Fale conosco no Blogger

Como criar a página Fale conosco no Blogger

por Baixedetudo
0 comentário 11 minutes ler
[ATENÇÃO ]
Obtenha as vantagens: Sem encurtador, Sem anúncios,Suporte na Instalação,Conteúdo Exclusivo, Pedidos de software ,filmes Etc.. Obtenha as vantagens da conta  agora! CLICANDO AQUI!

 


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. 
[ATENÇÃO ]
Obtenha as vantagens: Sem encurtador, Sem anúncios,Suporte na Instalação,Conteúdo Exclusivo, Pedidos de software ,filmes Etc.. Obtenha as vantagens da conta  agora! CLICANDO AQUI!

 


você pode gostar

Adblock Detected

Please support us by disabling your AdBlocker extension from your browsers for our website.