Excelente popup para convidar seus visitantes a assinar sua newsletter.
Apresentamos para você uma ótima opção de popup para que os visitantes de seu blog possam assinar seu feed e receber as atualizações por Email. Como sabemos as janelas popup são uma excelente ferramenta pois chamam bastante a atenção por aparecerem espontaneamente e mostrando algo desejado.
Essa popup conta com o sistema de cookies, ou seja, ela só aparecerá uma vez para cada visitante, só aparecendo novamente quando o mesmo limpar o cookies de seu navegador. Isso a torna menos "enjoativa" e também não compromete o conteúdo de seu blog aparecendo a toda hora.
O Prodeveloper apenas divulga essa popup e ensina como colocar em seu blog, os créditos vão todos para Ajuda Blogueiros e Blogando com Facilidade, por terem criado essa excelente opção para se ter no blog.
Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.
TUTORIAL
1- Acesse seu Blogger, vá em "Modelo" e depois "Editar HTML".
2- Clique no código de seu template, pressione "CTRL+F" e pesquise por </head>
3- Logo ACIMA, cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'></script>
<script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){$('#fanback').delay(100).fadeIn('medium');$('#fanclose,#fan-exit').click(function(){$('#fanback').stop().fadeOut('medium')})}$.cookie('popup_user_login','yes',{path:'/',expires:1})});</script>
* Caso seu blog já possua a biblioteca JQuery instalada, não coloque o trecho em VERMELHO.
4- Pesquise agora por ]]></b:skin>
5- Logo ACIMA, cole o seguinte código:
#fanback {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}6- Pesquise agora por <body>
#fan-exit {width:100%;height:100%}
#fanbox {background: white;width: 720px;height: 250px;position: absolute;top: 50%;left: 50%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -150px 0 0 -350px;}
#infomage {float: left;margin-left: 24px;margin-right: 10px;padding-top: 30px;}
#infomage img {max-height: 385px;max-width: 200px;}
#boxer-left {float: left;height: 400px;width: 480px;overflow: hidden;}
#fanclose {float: right;cursor: pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRbi4-VQ58qNsZIWwaovJo-hEVIlKsMa6rMTrF9ymaS1nY-KZyCz_Hw98Jk_i-mcyhC-qjet7ADWNj_gmbBrX85n9BDTJ393-RS5lBWyJrR0TSg3D_RtDHm10fWzeesL1LH1TxbcL8xzaP/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.boxertoptitle {color: #525252;font-weight: bold;font-family: Arial,sans-serif;font-size: 24px;text-align: center;margin-top: 5px;line-height: 26px;width: 420px;}
.boxertoptitle span {color: #FE0908;font-size: 27px;}
#caixaassinar {width: 420px;height: 50px;background: -moz-linear-gradient(top, #EDEDED 0%, #E2E2E2 100%);background: -webkit-linear-gradient(top, #EDEDED 0%,#E2E2E2 100%);border: 1px solid #C5C5C5;-webkit-border-radius: 7px;border-radius: 7px;background: #F2F2F2;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(100%,#EAEAEA));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#eaeaea',GradientType=0 );padding: 10px;margin-top: 25px;}
#caixaassinar input.input-rss {border: 1px solid #C5C5C5;-webkit-border-radius: 7px;border-radius: 7px;padding: 13px;background: white;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#FCFCFC));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 );width: 240px;font-size: 14px;}
#caixaassinar input.input-rss:focus {border: 1px solid #B0B0B0;outline: none;}
#caixaassinar input.mais {border: 1px solid #FE0908;padding: 9px;color: white;font-weight: bold;font-size: 16px;-webkit-border-radius: 3px;border-radius: 3px;cursor: pointer;text-shadow: 1px 1px 0 #FE0908;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYH-MIJgmMSY7GnpMeVRNng6j3oPfzHosU-qMzNbn91UPpjkGTRb-QHmfIu2MS01JLe5IW4ljd-pRyDFMZCzfsDSxjpp0V3Bnhmvgms6hp1xQioYi2z66A6ye2FboD95R0JNBmDpOMzM_7/s1600/rp1.jpg) repeat-x 0px -07px;transition: all 0.0s ease;-webkit-transition: all 0.0s ease;-o-transition: all 0.0s ease;-moz-transition: all 0.0s ease;}
#caixaassinar input.mais:hover {background: #FE0908;}
#caixaassinar input.mais:active {background: #FE0908;}
#descriptionboxer {margin-top: 10px;padding-bottom: 15px;width: 442px;text-align: justify;font-family: Arial,sans-serif;font-size: 14px;line-height: 19px;color: #444;height: 150px;min-height: 150px;max-height: 150px;}
#descriptionboxer strong {color: #8C171A;}
7- Logo ABAIXO, cole o seguinte código:
<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<div id='infomage'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-CzLJnAiE06z1N1qM3rCNmelyFno_emwt_ewimyEEHjeRQ1GULuwQUbytd6kcJ4qsH6oVx8JBiRDwiLQSUcNhlYfupeiYwsgzDeBGSQJEDnynFJdPavSKd4nGpJwQ9EOxL1dk_9Ddi4qg/s1600/email-newsletter-popup.png'/>
</div>
<div id='boxer-left'>
<div class='boxertoptitle'>Inscreva-se em nossa Newsletter e receba nossos artigos via e-mail <span>Gratuitamente</span>!</div>
<div id='caixaassinar'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOMEDOFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='input-rss' id='input-rss' name='email' placeholder='Digite aqui seu e-mail' style='display: initial;' type='text'/>
<input name='uri' type='hidden' value='NOMEDOFEED'/>
<input name='loc' type='hidden' value='pt_BR'/>
<input class='mais' style='' type='submit' value='INSCREVER-SE'/> </form>
</div>
<div><p align="left">Feito por <a href="http://www.ajudablogueiros.com.br">Ajuda Blogueiros</a> e <a href="http://www.blogandocomfailidade.com">Blogando com Facilidade</a></p></div>
</div>
</div>
</div>
* Em NOMEDOFEED, troque pelo nome de seu Feed Rss.
8- Clique em "Visualizar", estando tudo ok clique em "Salvar Modelo".
Gostou? Comente. Seu comentário é a motivação para nosso trabalho.
Comentários