Tutorial Widget simples Inscrever-se por Email para Blogger

Gadget/Widget Inscrever-se por Email simples. Elegante, com efeito CSS3. Acompanhe as instruções e instale no seu blog.

Este Widget super atraente, vai fazer com que os usuários inscrevam-se no seu blog e fiquem por dentro de conteúdos e novidades. Simples sem poluição é tendência. E o melhor de tudo, você pode instalar e editar muito simples. Veja o Tutorial

Instruções para Instalação do seu widget inscrição por email

» Acesse seu Blogger e vá em "Layout".

» Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

» Cole o seguinte código, dentro do Conteúdo:

<style type="text/css">
#torvi-emailsubsocial {
background-color: #e64946;
width: 275px;
height: 245px;
}
#torvi-emailsubsocial p {
line-height: 35px;
font-size: 24px;
font-weight: 400;
font-family: Oswald, sans-serif;
color: rgb(255, 255, 255);
text-align: center;
padding: 10px 20px 10px 20px;
margin: 0;
}
#torvi-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#torvi-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 18px;
font-family: arial, sans-serif;
font-weight: 400;
width: 92%;
border: 1px solid #fff;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#torvi-emailsubsocial .emailsub input:focus {
border-color:#E64946;
outline: none;
box-shadow: 0 0 1px 1px #E64946;
}
#torvi-emailsubsocial .emailsub .button {
background: #5c1e18;
color: white!important;
border:none;
outline: none;
margin-top: 20px;
transition:background .4s linear;
width: 90%;
height: inherit;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
font-size: 22px;
cursor:pointer;
border-radius: 0px;
}
#torvi-emailsubsocial .emailsub .button:hover{
background: #1e2629;
transition:background .3s linear;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Oswald:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css" />
<div id="torvi-emailsubsocial">
<p>INSCREVA-SE POR EMAIL</p>
<div class="emailsub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEUFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="name" placeholder="Seu Nome" />
<input type="text" name="email" placeholder="Seu Email" />
<input type="hidden" value="SEUFEED" name="uri" />
<input type="hidden" name="loc" value="pt_BR" />
<input value="ENVIAR" class="button" type="submit" />
</form>
</div>
</div>

Instruções para Edição do seu widget inscrição por email

» Edite os textos. "Seu Nome", "Seu Email" e "ENVIAR", como desejar.

» Substitua "SEUFEED", pelo o seu Feed RSS

» Salve e Posicione.

Isso é tudo pessoal, dê sua avaliação, e tire sua dúvidas nos comentários.