Widget Subscrição com Botões das Redes Sociais no Blogger

Coloque em seu blog um widget para que os visitantes inscrevam-se em sua newsletter e ao mesmo tempo curta suas páginas nas redes sociais.

Apresentamos mais uma opção necessária em seu blog, um widget para que os visitantes possam inscrever-se para receber atualizações por e-mail e ainda contando com botões que podem redirecionar para as páginas nas redes sociais. Esse código é bem simples, mas não deixa de ser bem bonito e principalmente fundamental caso sua página ainda não contenha essa opção que fideliza os leitores de suas postagens e os mesmos possam ter a comodidade de receber novidades em seu e-mail e/ou redes sociais.

Falando do design, esse widget contém uma sombra interna na box que pode ser configurada de acordo como desejar, e, também com o botão subscribe que você poderá deixar da cor que mais combinar com seu blog. Os botões das redes sociais não contém efeitos, mas, seu estilo combina perfeitamente com o restante da box e fará o principal que é direcionar para as páginas das redes sociais motivando os usuários a curti-las.

Os passos de instalação são bem práticos e simples, com pouco esforço o widget de subscrição com botões das redes sociais já estará funcionando em seu blog, veja a seguir:

Colocando em seu blog

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

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

>> Dentro do conteúdo do gadget, cole o seguinte código:

/*WIDGET SUBSCRIÇÃO COM REDES SOCIAIS -------------------------*/
<style>
.tbisubscribe {
border: 1px solid #D3D3D3; 
width: 300px;
padding:3px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<div class="tbisubscribe">
<div style="text-align:center; color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">Atualizações grátis em seu E-mail</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEUFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="SEUFEED" />
<input name="loc" type="hidden" value="pt_BR" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Digite seu email...&quot;) {this.value = &quot;&quot;}" type="text" value="Digite seu email..." />
<input alt="" class="tbisubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">Siga-nos:</div>
<div style="margin: -32px 0 0 120px;">
<a href="FACEBOOK URL" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL1JZQ3O9DMsufx0OTZB-b4sNN8JFoKGeJ2pLyt-Qlw5p4yJtCxHIvUY1wCWCEHu05NIvCZJy0ATDkK6Eohcvuo_Y6dxDdSaea5vo_dRa9oKgzOoUX0slZRleMaCYrOrZrDq9y77N7sT8/s32/facebook500.png" /></a>
<a href="TWITTER URL" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYFF7Pu0llnqq_HS5uj3UfZiWDj95CL7RZ8plaR3pCCFk1ZYwg64PMb1I3CjXvi8XcY3G43XCdl2s5ONyqqxrd5g3DeKySEd2YUR-8WvZCYsbcozQkXTfctzTMY2Ywt4b6TZtCw-daF0/s32/twitter.png" /></a>
<a href="GOOGLE+ URL" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHz3j8jqV0mJ0y2iaOCEvBtZwAVvBBiTDVmYSMEEO57hPT71WT4mpTLafTBDXeiYQfJVRCEUd10JCnWketoyLi_cEnxgl8EqMacHxKUrD9viPWjLo-CqsQ2gS5gaJJJ5dxqgovJNDk6Y/s32/googleplus-revised.png" /></a>
<a href="PINTEREST URL" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDshM4EKBMpcBQI09D0yCc77wWUJv0ELjrmqpAioFkVZH2_BpP9v25BMF6Yj1rQaX148AfwiXPHdI4G37kOrMyjumPLaHkbAQS6y0wac12sTWWaeGTDHXe4uiQP3KuEi8xSPWJGAOGot8/s32/pinterest.png" /></a>
<a href="FEEDRSS URL" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhlhF8Kr9LKx9Yb14DH3lmmbatxzg-l1LWCQzJsYnHB7_9OfVPfAj0naNOydd6tO_gK7sa28wwZpbiAi_u6yQzkvE57z2oETgYdvu5NZTNn7DxByr2jCMnAoQmXwbjz4odMfcSABW-Tc/s32/rss.png" /></a>
</div>
</div>

Personalização

* Substitua os trechos destacados em LARANJA, pelo nome de seu Feed.

* Substitua os trechos destacados em VERMELHO, pelas urls das redes sociais correspondentes.

* Substitua os trechos destacados em AZUL, pelas mensagens que aparecerão ao passar o mouse.

* As partes destacadas em ROSA, são as frases da caixa, altere caso desejar.

>> Clique em "Salvar", arraste o gadget para a área desejada e clique em "Salvar Organização".

>> Vá em seu blog e veja como ficou.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.