Box Flutuante Assinar Feed via Email com jQuery Para Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Acredito que você já observou que muitos blogs tem um sistema de assinatura de e-mail em forma de pop-up, que aparece quando um novo visitante entra no blog. No tutorial de hoje gostaria de compartilhar um Box Flutuante Assinar Feed via Email com jQuery para Blogger muito elegante, que foi extraído do StudioPress e foi usado colorbox jQuery para adicionar um pop-up muito legal.

Este Box flutuante assinar Feed via Email com jQuery para Blogger irá aparecer uma vez em sete dias para o visitante específico; de maneira que não venha irritar seus leitores diariamente. Ele vai ajudar você a aumentar o número de seus assinantes de Feed Rss.

O modelo é como na imagem abaixo.

Box flutuante assinar Feed via Email

Adicionar Box Flutuante Assinar Feed via Email com jQuery para Blogger

Entre na aba “Layout”, clique em “adicionar um gadget”, (pode ser em qualquer lugar: sidebar, footer etc, mas não coloque título), escolha o modo HTML/javascript e cole o seguinte código:

<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css" />
<style>

/*——————————————————*/
/*Email Subscribe Box By Dicas Blogger www.dicasblogger.com
/*————————————————*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif;
color: #666;
height: 355px;
}

#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration: none;
}

.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding: 10px;
line-height: 25px;
font-family: arial !important;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}

#subs-container {
padding: 35px 0 30px 0;
position: relative;
}

a:link, a:visited {
border: none;
}

.demo {
display: none;
}
</style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>
<script src=”http://code.helperblogger.com/jquery.colorbox.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
if (document.cookie.indexOf(‘visited=true’) == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = “visited=true;expires=” + expires.toUTCString();
$.colorbox({width:”450px”, inline:true, href:”#subscribe”});
}
});
</script>
<!– This contains the hidden content for inline calls –>
<div style=’display:none’>
<div id=’subscribe’ style=’padding:10px; background:#fff;’>
<style> .home-featured-right {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
border: 5px solid #fff;
font-size: 16px;
margin: 0px;
width: 370px;
font-family: calibri;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
color: #fff;
text-shadow: #a64242 -1px -1px;
text-align: center;
}

.home-featured-right p {
font-size: 16px;
margin-bottom: 20px;
}

.home-featured-right .widget {
margin: 35px;
}

.home-featured-right h4.widgettitle {
font-size: 26px;
margin-bottom: 20px;
}

.home-featured-right input[type=text] {
-moz-box-shadow: inset 0 1px 2px 1px #eee;
-webkit-box-shadow: inset 0 1px 2px 1px #eee;
background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
border-bottom: none;
border-left: 1px solid #963c3c;
border-right: none;
border-top: 1px solid #963c3c;
box-shadow: inset 0 1px 1px 1px #eee;
color: #000;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 12px;
padding: 14px 15px 14px 45px;
width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
border: none;
font-size: 0;
height: 28px;
margin: 0 0 0 15px;
line-height: 0;
text-indent: -9999px;
width: 26px;
}

#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: “Arial”,”Helvetica”,sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
margin-left: -20;
}

#email-news-subscribe .email-box input.email {
background: #FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: “Arial”,”Helvetica”,sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
color: #333
}

#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: “Arial”,”Helvetica”,sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: white;
text-shadow: #d08d00 1px 1px 0;
padding: 7px 14px;
margin-left: 3px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline: 0;
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: #FFFFFF;
text-shadow: #d08d00 1px 1px 0
}
</style>

<div class=”home-featured-right”>
<div id=”enews-2″ class=”widget enews-widget”>
<div class=”widget-wrap”>
<div class=”enews”>
<h4 class=”widgettitle”>Assine para receber as atualizações</h4>
<p>Receba nossas ultimas atualizações direto no seu email. É so digitar seu endereço de email abaixo….</p>
<p>Sua privacidade e endereço de email estará seguro conosco!</p>
<div id=”email-news-subscribe”>
<!– Email Subscribe –>
<div class=”email-box”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.openundefined’http://feedburner.google.com/fb/a/mailverify?uri=NOME-DO SEU-FEED’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<input class=”email” type=”text” style=”width: 150px; font-size: 12px;”
id=”email” name=”email” value=”Enter Your Email here..” onfocus=”if(this.value==this.defaultValue)this.value=&#39;&#39;;”
onblur=”if(this.value==&#39;&#39;)this.value=this.defaultValue;” />
<input type=”hidden” value=”NOME-DO-SEU-FEED” name=”uri” />
<input type=”hidden” name=”loc” value=”pt_Br” />
<input class=”subscribe” name=”commit” type=”submit” value=”Subscribe”
/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!– end .home-featured-right –>
<div style=”background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: “arial”,”helvetica”,sans-serif;”> <!– Não remova o link,se você remover os creditos o gagdet não vai funcionar –><span class=”author-credit” style=”font-family: Arial, Helvetica, sans-serif;”><a href=”https://ferramentasblog.com” target=”_blank” >[Ferramentas Blog]</a></span></div></div>
</div>

Faça as alterações necessárias. Na parte destacada em vermelho, coloque o nome do seu Feed.

– Lembrando que para este Widget funcionar é necessário que você tenha habilitado a opção “assinatura de feed por email”. lá no painel do FeedBurner.

Eu acertei o cookie do tempo de atualização para sete dias, o que significa que este pop-up irá aparecer apenas uma vez em 7 dias para o visitante específico. Você pode facilmente alterar este valor, alterando o valor 7. Mas se você definir o valor mais baixo, ele pode irritar seus leitores diários. Assim, eu recomendo que você defina o valor entre 3 a 7.

Seus comentários e sugestões são sempre bem-vindos.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

19 Comentários

    • Muito obrigado pelos elogios, estamos trabalhando para oferecer aos nosso leitores conteudo de qualidade, e um visual agradavel. Vou fazer um tutorial ensinado como colocar esse balão que mostra o numero de comentários, e vou ensinar também a colocar essa faixa colorida. Aguarde!

      Valeu!

      Responder

  1. Olá Kemuel, muito bom o box, só fiquei inseguro em relação ao tempo de atualização do cookie. Para colocar a cada 15 dias basta alterar ‘var fifteenDays = 1000*60*60*24*7’ para ‘var fifteenDays = 1000*60*60*24*15’? É isso mesmo?
    Obrigado!

    Responder

  2. Poderia dizer-me então como mudo a cor? em que trecho do codigo altero? ou melhor o que corresponde ao cor-de-rosa para puder alterar é esta cor – #d05353? Obrigado e continuação do bom trabalho!

    Responder

  3. coloquei o codigo no meu Blog e ele nao aparece a janela do feed. Ele executa um script certinho que tenho do facebook e esse ele nao abre a janela.

    Responder

  4. fiz um teste no meu blog e nao funcionou. Eu tenho um codiigo que executa entes para curtir a pagina do face, será que essa pode estar interferindo na abertura do feed?

    Responder

  5. Boa tarde.

    Usei esse código, o box apareceu, no entanto não está “flutuante”. Como posso corrigir para que seja “flutuante”? Obrigado!!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.