Código do box flutuante

Views:
CÓDIGO DA CAIXA CURTIR
(altere onde aparece o nome da minha fanpage pelo nome da sua ou gere a sua aqui nesta página)

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FElaineGaspareto%2F&tabs&width=530&height=300&small_header=false&adapt_container_width=false&hide_cover=false&show_facepile=true&appId=1566384683669266" width="530" height="300" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


CÓDIGO CSS
(colar acima de ]]></b:skin>)

/*Início do Código CSS*/
#ccexitpop{
font-family: 'Muli', 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:9999999;
}
#ccexitpop .popbox{
z-index:9999999;
border-bottom:5px solid#3b5998;
width:540px;
height:330px;
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{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3b5998), color-stop(1, #305196));
background:-moz-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-webkit-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-o-linear-gradient(top, #3b5998 5%, #305196 100%);
background:-ms-linear-gradient(top, #3b5998 5%, #305196 100%);
background:linear-gradient(to bottom, #3b5998 5%, #305196 100%);
color:#fff;
padding:5px;
margin:0;
border-radius:4px 4px 0 0;
text-align:center;
}
#ccexitpop h2{
font-family: 'Muli', sans-serif;
color:#fff;
font-size:15px;
margin:5px;
text-transform:uppercase;
font-weight:400;
}
#ccexitpop .popbox-body{
padding:20px;
padding-bottom:10px;
}
#ccexitpop .popbox-close{
position:relative;
text-align:center;
width:10px;
float:right;
}
.cc-subs{
width:100%;
float:center !important;
}
.popbox-title img{
width:30px;
position:relative;
top:5px;
right:4px;
border:0;
}
/*Fim do Código CSS*/



CÓDIGO JAVASCRIPT
(colar acima de </head>)

<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=Muli' rel='stylesheet' type='text/css'/>


CÓDIGO HTML
(colar acima de </body>)

<!-- Janela pop up para curtir a fanpage by Elaine Gaspareto -->
<div id='ccexitpop'>
<div class='overlay'></div>
<div class='popbox'>
<div class='popbox-title'>
<h2><img src='https://2.bp.blogspot.com/-vCTwLM5ttZY/WbWRlRO8r6I/AAAAAAABZ40/NvqHu9rFn50hy0WUGM-GCSgkcmfpNi0WgCLcBGAs/s1600/facebook-icon.png'/>Antes de sair gostaria de curtir a fanpage do blog?</h2>
</div><!--Title-->
<div class='popbox-body'>
<div class='cc-subs'>
<!--//Área do código do box da fanpage//-->

AQUI VOCÊ COLA O CÓDIGO CONVERTIDO DE SUA CAIXA DE CURTIR A FANPAGE DO FACEBOOK

<!--//Final da área do código do box da fanpage//-->
</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-->


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage