Como adicionar caixa de subscrição feedburner personalizada no blogger

Bom dia a todos, hoje venho com mais uma fantástica dica que vos vai ajudar a aumentar significativamente o vosso número de subscritores do FeedBurner, uma fantástica caixa personalizada para os vossos leitores assinarem a vossa Newsletter e receber as vossas postagens automaticamente no e-mail.
A caixa de subscrição por e-mail não contém apenas a opção de subscrever, nela também contêm as opções de o seguir no Google+, Twitter e Facebook, assim não está apenas a aumentar o seu número de subscritores mas também a sua popularidade nas redes sociais.

Pode ver o resultado final na imagem abaixo:

 

subscription-box

 

Implementação: A implementação deste widget é super simples. Para adicionares esta caixa de subscrição no teu blogger segue os seguintes passos listados abaixo:

    1. Entra no blogger
    2. Clica em modelo
    3. Clica em adicionar uma mini-aplicação
    4. Escolhe um HTML/JavaScript
    5. Cole o código abaixo:

</ol>
<div style=”text-align: justify;”>
<blockquote><span><span>
</span></span><style><!–
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://lh5.googleusercontent.com/-FIiElB5jJ3E/UJUoV7NgFUI/AAAAAAAAAx4/Oh27DfxWa0g/s454/Sharing%2520Touch%2520Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
–></style>
<div><!–RSS–>

<!–Google Plus–>

<!–Facebook–>

<!– Twitter –></div>
<style><!–
.tk-email{
background:url(https://lh4.googleusercontent.com/-cgxNZKF5kNg/UPJb3vrrdGI/AAAAAAAAAC4/cA6VRFl-Vn0/s48/email%2520%25283%2529.png) no-repeat 0px 5px ;
width:300px;
padding:0px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 1px 0;
color:#686B6C;
}
.tk-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.tk-emailsubmit:hover{
background:#3d87d0;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#666;}
–></style>
<div>Subscribe via Email
<form id=”feedform” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘&lt;span&gt;http://feedburner.google.com/fb/a/mailverify?uri=XXXXXX&lt;/span&gt;’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<input type=”text” name=”email” value=”Enter email address here” onfocus=”if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}” />
<input type=”hidden” name=”uri” value=”&lt;span&gt;FeedBurner&lt;/span&gt;” /><input type=”hidden” name=”loc” value=”en_US” />
<input type=”submit” value=”Submit” /></form>&nbsp;

</div></blockquote>
</div>

 

Depois de colar o código acima na caixa HTML/JavaScript do seu blog ainda não pode salvar, antes disso têm de editar os itens a vermelho para um funcionamento normal da aplicação. Substitua as letras a vermelho com os seus dados das redes sociais e endereço do FeedBurner e depois disso pode salvar!

Adicionar Comentário