segunda-feira, 1 de fevereiro de 2016

Aumentar Assinantes Feedburner com Responsive subscribe widget

Resposive-feedburner-widget-boost-subscribers



Hoje vamos compartilhar um widget com layout otimizado para seu blogger, também para dispositivos móveis uma vez que isso vem padrão no blogger podemos personalizar afim de melhorar isso juntamento com o layout do nosso template, onde você pode distribuir seu conteudo de uma melhor forma para seus visitantes isso vai aumentar seus assinantes em 30% com o passar do tempo.

As principais características é que ele se adapta a qualquer tipo de template pode ser customizado, com puro CSS isso carrega muito rápido o que não prejudica no desempenho do template, você pode usar isso abaixo do menu, no fim dos post ou até mesmo no rodapé do blogger.


Para adicionar isso siga os passos abaixo:

Faça login no blogger no menu procure por modelo
então editar/HTML com as teclas combinadas CTRL+F
procure por ]]></b:skin>  e logo acima disso cole o seguinte código:

#feedsignup{position:relative;padding:5px 0;background:#2D363E;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;float:right;width:50%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.feedsignup-email-field{background:#252C33;color:#ccc;margin:10px 0;padding:15px 20px;width:50%;border:0}
.feedsignup-email-button{background:#2AA9E0;color:#fff;cursor:pointer;font-weight:700;padding:11px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;transition:all .6s}
.feedsignup-email-button:hover{background:#00AEEF;}
#feedsignup p.feedtext{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:200%;float:left;font-weight:400;line-height:normal;width:45%}
#feedsignup p.feedtext span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#feedsignup p.feedtext span.feedtext1 {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#feedsignup p.feedtext span.feedtext1:before,#feedsignup p.feedtext span.feedtext1:after{display:none}
#feedsignup p.feedtext span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#feedsignup:hover p.feedtext span:before{width:100%;}

@media only screen and (max-width:767px){
  #feedsignup p.feedtext{margin:0 0 20px 0;width:100%;}
   .subscribe-wrapper {width:100%;}
}

Agora procure por <data:post.body/> ou <div class='post-footer'>   então
cole o código abaixo

Para colocar abaixo do blog header cole o código antes de <div id='content-wrapper'>  ou cole o código abaixo  depois de <data:post.body/> or <div class='post-footer'> para colocar abaixo da postagem do blog  ou antes de <footer id='footer-wrapper'>  para mostrar no rodapé do blogger.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>      
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='feedsignup'>
<p class='feedtext'><span>READY TO GROW</span>
<span class='feedtext1'>with</span> Hustlers</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=mybloggerseo' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=mybloggerseo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='mybloggerseo'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='feedsignup-email-field' name='email' placeholder='Enter your Email Here...'/><input class='feedsignup-email-button' title='SIGN UP' type='submit' value='SIGN UP!'/></form>
  </div>
</div>
</div>
            </b:if>      
      </b:if></b:if>

salve para ver o resultado.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner