6 de julho de 2016

Caixa de captura de e-mails com redes sociais para usar como widget no blogger




Sabemos que a captura de e-mail em um blog é essencial para ter o leitor por perto, no blogger acostumamos usar o FeedBurner para capturar e sempre deixar o leitor por dentro das novidades do nosso blog.

Na hora de pedir o e-mail do visitante é muito importante que o design seja atraente e coerente com a identidade visual do seu blog, passando mais profissionalismo além do blog ficar mais bonito.

Pensando nisso, trouxe um modelo de caixa de capturar e-mails com icones das redes sociais, você pode instalar onde desejar no seu blog, seja nos posts ou sidebar.
  • Como criar uma conta no FeedBurner para meu blog?
Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

Introdução

Começando com uma caixa bem elegante indo para o tema mais escuro, lembrando que as caixas são personalizadas através do CSS, então você conseguirá deixar como quiser.

Resultado:

Receba nossas novidades por e-mail


Como instalar

  1. Acesse o Painel do Blogger
  2. Vá até Modelo do seu blog desejado e clique em Editar HTML
  3. Procure por </head> e acima dele cole o seguinte trecho:
  4. <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  5. Agora procure por ]]></b:skin> e acima cole o seguinte código:

  6. #subscribebox{background:#576269;padding:20px;color:#fff;font-size:15px;text-align:center;}/*Responsavel pelo fundo da caixa, troque o background para a cor que desejar*/
    .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
    .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
    .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
    .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
    .follow-subscribe-social ul li:last-child{margin:0}
    .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
    .follow-subscribe-social ul li a:hover{color:#fff}
    form.subscribe{margin-top:-7px}
    form.subscribe input{display:block;width:100%}
    .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0}
    form.subscribe .placeholder{color:#cacaca}
    form.subscribe input:-ms-input-placeholder{color:#cacaca}
    form.subscribe input::-webkit-input-placeholder{color:#cacaca}
    form.subscribe input:-moz-placeholder{color:#fafafa}
    form.subscribe input::-moz-placeholder{color:#fafafa}
    .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;cursor:pointer;}/*Troque o background para alterar a cor do botão Inscrever-se*/
    .subscribe-button:hover{background-color:#f1d640}
    .subscribe-button:focus{outline:0}
  7. Salve o modelo
  8. Depois vá até Layout, escolha a área que quer exibir a caixa e clique em Adicionar Gadget e escolha HTML/JavaScript e cole:
  9. <div id="subscribebox">
    <div class="follow-subscribe-social">
    <ul>
    <li><a href="#LINK" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-linkedin"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-google"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-dribbble"></i></a></li>
    <li><a href="#LINK" target="_blank"><i class="fa fa-instagram"></i></a></li>
    </ul>
    </div>
    <h3>Receba nossas novidades por e-mail</h3>
    <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-DO-FEED, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='USUARIO-DO-FEED'/>
    <input name='loc' type='hidden' value='pt_BR'/>
    <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Digite seu melhor e-mail&quot;;}' onfocus='if (this.value == &quot;Digite seu melhor e-mail&quot;) {this.value = &quot;&quot;;}' value='Digite seu melhor e-mail'/>
    <input class="subscribe-button" type="submit" value="Quero Receber" />
    </form>
    </div>
Feito isso, altere o #LINK para os respectivos links de cada rede social, você pode excluir a linha da rede social que não for utilizar. Altere também o trecho destacado USUARIO-DO-FEED pelo seu usuário quando você cadastrou seu blog no FeedBurner e salve.

Dúvidas? deixe um comentário.

Classificação: 5Caixa de captura de e-mails com redes sociais para usar como widget no blogger por em . Aprenda a colocar uma caixa de captura de e-mails elegante no blogger.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: