Janela pop up que abre ao sair do blog

Views:

Código HTML


<!-- Janela pop up para assinar feed by Elaine Gaspareto -->
<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=elainegasparetoparada" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='elainegasparetoparada'/>
<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-->




Código CSS:


/*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*/



Código Javascript


<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'/>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage