O uso das caixas PopUp estão cada dia mais comuns nos sites e blogs, quando escrevi o artigo estratégias para aumentar sua lista de assinates do blog falei sobre a importância de uma popup para a captura de email de seus leitores e visitantes. Tem muita gente por ai dizendo que esse tipo de abordagem é invasiva, não digo que estão errados mais discordo, janelas PopUp não são invasivas se usada de forma correta. Faço o uso de uma PopUp aqui no AlternativaBlogger e não obrigo ninguém a tomar nenhuma ação, é claro que quero que curtam minha página do facebook, sigam meu blog no twitter e assinem para receber minhas atualizações mas meus leitores e visitantes não são obrigados a fazerem, o que eu quero é que eles curtam, sigam e assinem simplesmente porque gostam do meu trabalho e naõ porque são obrigados.
QUANDO UMA POPUP SE TORNA INVASIVA?
Em minha opnião uma PopUp se torna invasiva e prejudicial quando é usada para mostrar anúncios, usar esse tipo e abordagem para promover afiliados e ganhar dinheiro só demonstra o desespero do blogueiro, pra mim quem quer realmente alcançar o sucesso e ter um blog reconhecido e respeitado já mais deve usar uma popup na intensão de ganhar dinheiro. Use a PopUp apenas para divúlgação de seu blog, pedidos de assinatura, entre outras ações dessa forma.
Vou deixar abaixo o código de uma PopUp configurada com Cookies para usar em seu Blogger. Em especial é a mesma que uso aqui no Alternativa Blogger só fiz algumas modificações.
A PopUp que vou disponibilizar para você usar em seu blogger é essa que mostro na imagem abaixo.
A PopUp que vou disponibilizar para você usar em seu blogger é essa que mostro na imagem abaixo.
Primeiro de tudo, nunca se esqueça de salvar uma cópia do seu template antes de fazer qualquer edição em seu código. Não sabe como fazer uma cópia então visite - Como Salvar Uma Cópia do Template do Blog e vamos lá.
COLOCAR POPUP NO BLOGGER
Para colocar essa janela PopUp em seu blog você deve fazer o seguinte: vá até o painel de seu blog e clique em Modelo >> depois clique em Editar Html >> procure pela tag </head> em seu template cole o código script/css acima da tag </head>.<link href='http://dl.dropbox.com/u/44914301/codigos/colorbox.css' media='screen' rel='stylesheet'/>
<script src='https://dl-web.dropbox.com/get/jquery.js?w=47105892'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js'/>
<script src='http://dl.dropbox.com/u/44914301/codigos/jquery.colorbox-min.js'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"700px", inline:true, href:"#subscribe"});
}
});
</script>
<style>
#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}
.box-tagline {color: #999;font-size: 14px;margin: 0;text-align: center;}
.box-side.left {padding: 0 30px 0 15px;border-right: 1px solid #ecedf3;}
.box-side.left li { list-style:none; margin-bottom:20px;}
.box-icon {width: 72px;height: 54px;padding: 6px 0 0 0;margin: 0 auto;}
.box-icon a.rss{display: block;width: 70px;height: 56px;margin: 0 auto;}
.box-icon a{display: block;width: 72px;height: 54px;}
.box-icon a.email img,.box-icon a.rss img {margin: -5px 0 0;border: 0 none;}
.box-side h4, .box-side h4 a {font-size: 14px;line-height: 14px;color: #f26535;font-weight: bold;}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {font-size: 11px;color: #5e6066; line-height: 18px;margin: 0 0 20px 0;}
.box-side h4 a:hover {color: #f26535;}
.demo {display:none;}
#subscribe{font:12px/1.2 Arial,Helvetica,san-serif;}
#subscribe a,#subscribe a:hover,#subscribe a:visited{text-decoration:none;}
#subs-container{position:relative;padding:35px 0 30px;}
.box-icon{width:72px;height:54px;margin:0 auto;padding:6px 0 0;}
.box-icon a.rss{display:block;width:70px;height:56px;margin:0 auto;}
.box-icon a{display:block;width:72px;height:54px;}
.box-icon a.email img,.box-icon a.rss img{border:0 none;margin:-5px 0 0;}
.box-side h4,.box-side h4 a{font-size:14px;line-height:14px;color:#f26535;font-weight:700;}
.box-side h4{margin:20px 0 10px;}
.box-side h5{font-size:11px;color:#5e6066;line-height:18px;margin:0 0 20px;}
.box-side h4 a:hover{color:#f26535;}
</style>
Não é preciso fazer nenhuma alteração no código Script/Css. Agora vamos colocar o código Html que é o responsavél pela aparição da PopUp.
Ainda em seu código Html procure pela tag <body> se você usa um dos modelos pradrão do blogger pode estar assim <body expr:class='"loading" + data:blog.mobileClass'> cole o código Html abaixo logo abaixo da tag <body>.
<div style='display:none'>Na marcação azul você deve colocar a ID da sua página de fãs do facebook para aparecer sua caixa like box, e nas marcações em vermelho você deve colocar o nome do do seu feed rss. Feito as alterações agora é só Salvar e ver como ficou.
<div id='subscribe' style='padding:10px; background: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/Fatia-cabealho-popup.png) repeat-x top;'>
<h2 class='box-title' style='text-transform: uppercase;color: #ffffff;font-size: 20px;font-weight: 700;text-align: center;margin: 10px 0;'>Assine Nossa Newslatter gratuitamente!</h2>
<h3 class='box-tagline' style='color: #fea63f;font-size: 14px;text-align: center;margin: 0;'>Receba Nossas Atualizações em Seu E-mail:</h3>
<div class='clearfix' id='subs-container' style='position: relative;padding: 35px 0 0px;'>
<div class='box-side left' style='width:350px;text-align: center;border-right:1px solid #ecedf3;padding:0 20px 0 15px;'>
<li>
<div style=' background:#fff url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/curtirFacebook-tecwindows-1.png) no-repeat top right; width:350px; height:180px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FID DA SUA PÁGINA DO FACEBOOK AQUI&width=350&height=180&colorscheme=light&show_faces=true&border_color&stream=false&header=false' style='border:none; overflow:hidden; width:350px; height:180px;'/>
</div>
</li>
<li style='font-size: 14px;font-family: arial;background-image: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/bullet-bullet.png);background-position: 0px 0px;text-shadow: 0px 0px 1px #B5B5B5;font-weight: normal;background-repeat: no-repeat;padding-left: 35px;margin-bottom: 10px;line-height: 27px;text-align: justify;color: black;list-style-type: none;text-transform: uppercase;'>Seu Email Nunca Será Revelado!!!</li>
</div>
<div class='box-side right' style='width: 240px !important;float:right;margin-top:-236px;margin-right:10px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NOME DO SEU FEED AQUI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'><img alt='Assine nosso feed gratis' src='http://i1212.photobucket.com/albums/cc447/wesleyextreme/Assinar_rss_assinaturadefeed.png' style='margin-top: -2px;width: 124px;height: 125px;' title='Assine nosso feed gratis'/><p>
<input name='email' onblur='if (this.value == '') {this.value = 'Digite seu e-mail aqui!';}' onfocus='if (this.value == 'Digite seu e-mail aqui!') {this.value = '';}' size='30' style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ8P5JCz3Max00pll7GEaZshyEmnhnreMLkBCbwHpvY5OeDSoWtJEKBQwjY9qqWm2Qxy0jay8O78OACxltrj-MPsk_fMkJ5Ha5cBY_dBF-hZ-0aQeHZ3SKyIz4rqxSdcvCSsB6HLHOiEs/s1600/lightbox-text-box.png);margin-bottom: 5px;border: 0px;line-height: 20px;padding-right: 10px;padding-top: 12px;margin-left: 3px;background-repeat: no-repeat;padding-bottom: 12px;width: 230px;color: #555;font-family: Helvetica, Arial, sans-serif;font-size: 14px;padding-left: 10px;background-color: transparent;background-position: left center;outline: none;' type='text' value='Digite seu e-mail aqui!'/>
</p><input name='uri' type='hidden' value='NOME DO SEU FEED AQUI'/><input name='loc' type='hidden' value='pt_BR'/><input style='width: 255px;height: 47px;margin-bottom: 5px;margin-left: auto;margin-right: auto;background: url(http://i1212.photobucket.com/albums/cc447/wesleyextreme/boto-de-assinatura.png) no-repeat;text-align: center;border: none;font-size: 19px;color: white;font-family: Helvetica, Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px black;text-transform: uppercase;letter-spacing: -1px;line-height: 45px;' type='submit' value='INSCREVER-SE!'/></form><br/>
<span style='float: left;margin-top: -30px;color: gray;margin-left: -400px;font-size: 13px;'>Desenvolvido Por <b><a href='http://www.blogandocomfacilidade.com/2011/10/fantastica-popup-em-janela-modal-para.html' style='color: #004D97 !important;' target='_blank'> Iago Melanias</a> editado por <a href='http://www.alternativablogger.com/2012/04/popup-subscricao-rss-blogger.html' style='color: #004D97 !important;' target='_blank'>Wesley Marinho</a></b></span>
</div></div><br/><br/></div></div>
Lembrando que a caixa é configurada com cookies e para visualizar mais de uma vez antes de expirar o periodo será preciso fazer limpeza de históricos e cookies do seu navegador.
Deixar sua PopUp configurada para que apareça para seu leitor a cada 15, 30, 90 dias é a melhor opção, assim se ele não assinar na primeira visita você terá mais tempo para conquistar esse leitor e com certeza com o tempo você consiguirá a assinatura dele. Já com uma popup que abre todo dia ou toda hora você vai acabar deixando seu leitor nervoso ou incomodado e o que pode acabar acontecendo é ele deixar de visitar seu blog.
Aqui só disponibilizei a PopUp com cookie, mais para quem quiser sem cookie e com modelo diferente é só visitar o link abaixo.
. Fantastica PopUp em Janela Modal Para Assinar Feed
O que acharam? Espero que com essa super ferramenta você consiga juntar mais fãs e assinantes. Agora que terminou o tutorial podere ver também outros códigos e dicas para aplicar em seu blog.
. Caixa de Assinatura Rss Via Email Personalizada
. Como Criar Página de Fãs no Google Plus e Adicionar o Widget do Google+ no Blog
. Widget de Top Comentáristas Para Blog
. Box Flutuante de Redes Sociais Para Blogger
. Efeito Shadow Box no Blog Com Jquery no Template
. NavBar Personalizada para Blog
Não deixem também de assinar para receber nossas atualizações, e claro curta e siga nosso blog nas redes sociais.
Até mais!
