quinta-feira, 16 de março de 2017

Janela Pop Up Assinatura de Feed que Abre ao Sair do Blog

Hoje eu quero compartilhar um tutorial bem interessante, que faz diferente: ao invés de mostrar a caixa para assinar o feed assim que o leitor entra no blog o código que vou ensinar mostra essa caixinha quando o leitor está saindo do blog.

Esse mesmo modo de fazer pode ser aplicado ao box de curtir, com algumas diferenças.
Hoje vou ensinar como colocar a caixinha para assinar o feed.
No próximo tutorial ensino como usar esse código para colocar o box de curtir do Facebook.
Vamos aprender?

Janela Pop Up Assinatura de Feed que Abre ao Sair do Blog

Janela pop up para assinar o feed
São 3 códigos que você precisa implementar no código fonte de seu template.
São passos simples, mas faça com atenção, cuidado e sobretudo faça primeiro em um blog de testes.
Esses são os códigos, abra a página deles e conserve-a aberta para copiar no momento em que for solicitado:

Vá ao painel administrativo de seu blog e clique na aba Tema.
A seguir clique em Editar HTML e dentro da caixa de códigos tecle Ctrl+F.
Na barra de busca que aparecer digite </body> e tecle Enter para localizar.

ACIMA da tag </body> cole o Código HTML Abaixo.

<!-- Janela pop up para assinar feed by @johnfabeny -->
<div id='ccexitpop'>
<div class='overlay'></div>
<div class='popbox'>
<div class='popbox-title'>
<h2><img src='http://3.bp.blogspot.com/-RA-cSMlCLvg/VKbl_plxCJI/AAAAAAAAJ7g/c_hY1ynJt8k/s1600/feedburner-icon.png'/>Antes de sair gostaria de assinar nosso feed?</h2>
</div><!--Title-->
<div class='popbox-body'>
<div class='cc-subs'>
<!--//Área dos dados do feed//-->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=SeuFeedAqui" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='SeuFeedAqui'/>
<input name='loc' type='hidden' value='pt_BR'/>
<input class='emailinput' id='thebox' name='email' onblur='if (this.value == "") {this.value = "Digite seu endereço de email";}' onfocus='if (this.value == "Digite seu endereço de email") {this.value = ""}' type='text' value='Digite seu endereço de email'/>
<input id='thebutton' type='submit' value='Assinar agora'/>
</form>
</div><!--Subscribe-->
<div id='text-right'>
<h2>100% gratuito</h2>
<h2>atualizado</h2>
<h2>sem spam</h2>
</div><!--Text right-->
</div><!--Body-->
</div><!--Popbox-->
</div><!--ccexitpop-->
<script>
    var _ouibounce = ouibounce(document.getElementById('ccexitpop'), {
    aggressive: true,
    timer: 0,
    callback: function() { console.log('ouibounce fired!'); }
    });
    $('body').on('click', function() {
    $('#ccexitpop').hide();
    });
    $('#ccexitpop .popbox-close').on('click', function() {
    $('#ccexitpop').hide();
    });
    $('#ccexitpop .popbox').on('click', function(e) {
    e.stopPropagation();
    });
    </script>
<!--Final do Código HTML-->

Atenção!
Apenas o que esta destacado em VERMELHO deve ser alterado.

Editou tudo conforme seu gosto?
Salve.

Agora pesquise por </head> e ACIMA dessa tag cole o Código Javascript abaixo.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script src='http://yourjavascript.com/08011672710/ouibouncebyelainegaspareto.js'></script>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'/>

Se quiser altere o nome da fonte.
Escolha aqui a fonte que preferir.
Salve.

Agora localize esse trecho:

]]></b:skin> e Cole o Código CSS abaixo ACIMA dele.

/*Início do Código CSS*/
#ccexitpop{
font-family: 'Inconsolata', sans-serif;
display:none;
position:fixed;
top:0;left:0;
width:100%;
height:100%;}
#ccexitpop .overlay{
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background:#000;
opacity:0.7;
z-index:99998;
}
#ccexitpop .popbox{
font-family: 'Inconsolata', sans-serif;
z-index:99999;
border-bottom:5px solid#0072c3;
color:#333;
width:580px;
height:210px;
background:#fafafa;
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;left:0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
}
#ccexitpop .popbox-title{
font-family: 'Inconsolata', sans-serif;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
color:#fff;
padding:10px;
margin:0;
border-radius:4px 4px 0 0;
text-align:center}
#ccexitpop h2{
font-family: 'Inconsolata', sans-serif;
color:#fff;
font-size:18px;
margin:5px;
text-transform:uppercase;
font-weight:bold;
}
#ccexitpop .popbox-body{
padding:20px;
padding-bottom:10px;
font-size:12px;
}
#ccexitpop .popbox-close{
position:relative;
text-align:center;
width:30px;
float:right;
}
.cc-subs{
width:320px;
float:left;
}

.popbox-title img{
width:30px;
position:relative;
top:5px;
right:4px;
border:0;
}
#thebutton {
margin-top:5px;
font-family: 'Inconsolata', sans-serif;
width: 300px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%); 
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
-moz-border-radius:3px;-webkit-border-radius:3px;
border-radius:3px;border:1px solid #2dabf9;display:inline-block;cursor:pointer;
color:#ffffff;
font-size:15px;
padding:9px 23px;
text-decoration:none;
}
#thebutton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9)); 
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%); 
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%); background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);}
#thebox {
background: url('http://2.bp.blogspot.com/-T0Z08pY3a9I/VKboenoqJiI/AAAAAAAAJ70/IigCUR86B0E/s1600/email.png')no-repeat right center;
background-size:25px 25px;
width:242px;
font-family: 'Inconsolata', sans-serif;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out; 
-o-transition: all 0.30s ease-in-out;
outline: none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:9px 28px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#thebox:focus {background: url('http://2.bp.blogspot.com/-T0Z08pY3a9I/VKboenoqJiI/AAAAAAAAJ70/IigCUR86B0E/s1600/email.png')no-repeat left center;
background-size:25px 25px;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-o-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
#text-right{
float:right;
}
#text-right h2{
font-family: 'Inconsolata', sans-serif;
padding-left:30px;padding-top:3px;
font-size:16px;
color:#333;
margin:5px;
background: url('http://3.bp.blogspot.com/-6mEoOHymGzg/VKbiANhZ-WI/AAAAAAAAJ7I/VzfkHyzvKZI/s1600/mark.png')no-repeat left;
background-size: 25px 25px}
/*Fim do Código CSS*/

Esse código é o que define a aparência da sua janela pop up.

Se tiver trocado o nome da fonte no Código Javascript coloque nesse Código CSS a mesma fonte.

Pode trocar cor de fundo, cor de fonte, etc...
Todas as cores são definidas pelo código hexadecimal precedido do sinal #.
Qualquer alteração nesse código só deve ser feita se você tem um nível médio de conhecimento em CSS.

Alterou o que deseja? Cores, fontes, etc...
Salve.

Está pronto!

Se tudo deu certo seu blog exibe agora uma janela pop up que convida o leitor para assinar o feed do blog.
Para que a janela apareça role a página um pouco e a seguir faça de conta que vai fechar a página.
A janela surgirá.

Assine nosso Blog e receba Novos Conteudos em seu E-Mail :

Antes de sair, gostaria de saber Como Ganhar Creditos de GRAÇA no seu Celular?