Elegante Gadget de Assinar Feed Por E-mail para Blogger Com Ícones Sociais

Índice

Neste post eu vou explicar como adicionar um elegante gadget de assinatura por e-mail para blogger com ícones sociais. Espero que você goste. Ao utilizar este gadget os usuários podem assinar o seu blog. Ele vai ajuda-lo a obter novos assinantes via e-mail.

Veja no exemplo abaixo como é elegante esse gadget de assinar Feed por e-mail para blogger

Como adicionar o Elegante gadget de assinar Feed por e-mail para Blogger com ícones sociais

É muito simples e fácil.

Entre no painel do blog, escolha a opção “Layout”, clique em “adicionar um gadget”, escolha o modo HTML/javascript e cole o seguinte código:

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8OPFHYwfK9q4dpv26l3dUGDXZTWhM5EecpzXV5I0iidTeRn2Ypt79PyJL3Q9NRhI6-LW7bqL_qaO5QNelle98oRP8lMX44pqhJAdCVqfltgSqHrd7UK_JaRFhmXkKnnAl8AO26iM-y4/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj__vbbgINstb3VAw7_eezrVT2L0dwPbzNf6YJ6DIWX9JzD1ZQKJ_fzfD29xD6oJHjIn7NPJtSoRgbrx-PNmM8yIPGRcjkX2883gtoxhrBbfrnhvo6OtMS8XHIgwVi-_7hvwUC2hw1xhNk/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<br/>
<a class="social-icons" href="https://facebook.com/SUA_PÁGINA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0JfupYXP5wCGjwHh3eZ8PHU-yJEaCLdsPNmiyaH3-jSdWkR8NzqT45w5CpWwfMi23NCdY9Zpc0v8rU9KatsrAxkxgEbnJyyJUmXFq6GjLaWVG-sa1Zfv7xgbE9R2W4V10NJHr4KfiVwHA/s1600/Bloggertrix-facebook.png" /></a><a class="social-icons" href="https://twitter.com/NOME_USUARIO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhviz504RZ0NElJuaHVuHQ2DIaZFJSu0JqZF8e-gaXUyX4Qq9KP2krTazKMfMlSuz9rCkz1YP8lbK0e5aHm7_KZ7Pnt0tLsfp3csLjvTu7LsLqM7Jnhbql9y0KE6-qb-QUu52fBtkwK70bp/s1600/bloggertrix-twitter.png" /></a><a class="social-icons" href="https://plus.google.com/USUARIO"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQXimmZ15k5g5fugbrBJ_Kjs5RhUBiLDdkpmkAkSTsu33ag9_UF7Emnwvy5yhkAgFaHpRNjXV1O8tX-tDk2awgTBlAXbZNEtPHKScfT3y5CwO7ipBAFzDV5hi2SNELi9wpcCfxtGLEjB8/s1600/Bloggertrix-Googleplus.png" /></a><a class="social-icons" href="http://www.feedburner.com/SEU_FEED_ID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7dsjpWH-hKmtWlwj1LdBWUrVm5x9ANj216YtlrFgCI8h2fN28GrWQQr9WXABboWbaK7nkGmJC11GOrybFuD2-YQAN-qFqoaPGXVy7JMCIci8VLGGqVZaoHEbQS0_rey5_CzYJuDsHlLG/s1600/Bloggertrix-Rss.png" /></a><p>Subscribe Nosso Email Newsletter & Receba atualizações grátis!</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=ID_FEED" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEU_ID_FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" /><input name="loc" type="hidden" value="Pt_Br" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Assinar Agora !" /></form>
</div></div></div>

Substitua: SUA_PÁGINA – Pela sua página do Facebook

Substitua: NOME_USUARIO – Pelo seu nome de usuário no Twitter

Substitua: USUARIO – Pelo seu id de usuário do Google+

Substitua: SEU_FEED_ID – Pelo seu id no Feedburner

Substitua: ID_FEED - Pelo seu id no Feedburner

Substitua: SEU_ID_FEEDBURNER - Pelo seu id no Feedburner

Salve seu HTML/Javascript' e prontinho!

Qualquer duvida use a área de comentários.