Pasang Script Ouibounce di Blog

Increase your landing page conversion rates use ouibounce.

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
Gerakan cursor mouse anda ke tab browser kalian!
<img alt="ouibounce" src="http://4.bp.blogspot.com/-RFTJ7SaK45I/U5IA5H8GlKI/AAAAAAAAIDc/vqKQe0TOGQw/s1000/ouibounce.png" style="display:block;margin:10px auto"/>
  <div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>Terima kasih sudah mampir!</h3>
        </div>
        <div class="modal-body">
          <p>Email Subscription Request</p><br>
          <p>Silahkan berlangganan artikel kami, tidak ada ruginya loh dan pasti kalian mendapatkan ilmu yang bermanfaat sekali!</p><br>
          <p>Tutup modal ini dengan mengklik "No Thanks" di bawah atau mengklik di mana saja di luar modal!</p>
          <form action="http://feedburner.google.com/fb/a/mailverify?uri=beben-koben" method="post">
<input type="text" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" value="Ketik email anda disini..." /> 
<input type="hidden" value="beben-koben" name="uri" />
<input type="hidden" name="loc" value="id_ID" />
<input class="button" type="submit" value="SUBCRIBE" />
          </form>
        </div>
        <div class="modal-footer">
          <p>Tidak, Terima Kasih!!!</p>
        </div>
      </div>
    </div>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2014/06/install-script-ouibounce-to-blogger.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://undercover-blogger.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

#ouibounce-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}
#ouibounce-modal .underlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
#ouibounce-modal .modal {
  width: 600px;
  height: 400px;
  background-color: #f0f1f2;
  z-index: 1;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  -webkit-animation: popin 0.3s;
  animation: popin 0.3s;
}
#ouibounce-modal .modal-title {
  font-size: 18px;
  background-color: #252525;
  color: #fff;
  padding: 10px;
  margin: 0;
  border-radius: 4px 4px 0 0;
  text-align: center;
}
#ouibounce-modal h3 {
  color: #fff;
  font-size: 1em;
  margin: 0.2em;
  text-transform: uppercase;
  font-weight:...

JavaScript

!function(e,i){"function"==typeof define&&define.amd?define(i):"object"==typeof exports?module.exports=i(require,exports,module):e.ouibounce=i()}(this,function(){return function(e,i){function n(e,i){return"undefined"==typeof e?i:e}function o(e){var i=24*e*60*60*1e3,n=new Date;return n.setTime(n.getTime()+i),"; expires="+n.toGMTString()}function t(){y.addEventListener("mouseleave",u),y.addEventListener("keydown",r)}function u(e){e.clientY>s||c("viewedOuibounceModal","true")&&!f||(d(),v())}function r(e){b||c("viewedOuibounceModal","true")&&!f||e.metaKey&&76==e.keyCode&&(b=!0,d(),v())}function c(e,i){var n=document.cookie.split("; ").reduce(function(e,i){var n=i.split("=");return e[n[0]]=n[1],e},{});return n[e]===i}function d(){e&&(e.style.display="block"),a()}function a(e){var e=e||{};"undefined"!=typeof e.cookieExpire&&(l=o(e.cookieExpire)),e.sitewide===!0&&(k=";path=/"),"undefined"!=typeof e.cookieDomain&&(p=";domain="+e.cookieDomain),document.cookie="viewedOuibounceModal=true"+l+p+k,y.removeEventListener("mouseleave",u),y.removeEventListener("keydown",r)}var i=i||{},f=i.aggressive||!1,s=n(i.sensitivity,20),m=n(i.timer,1e3),v=i.callback||function(){},l=o(i.cookieExpire)||"",p=i.cookieDomain?";domain="+i.cookieDomain:"",k=i.sitewide===!0?";path=/":"",y=document.getElementsByTagName("html")[0];setTimeout(t,m);var b=!1;return{fire:d,disable:a}}});

var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 5,
    callback: function() { console.log('ouibounce fired!'); }
});
    $('body').on('click', function() {
    $('#ouibounce-modal').hide();
});
    $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
});
    $('#ouibounce-modal .modal').on('click', function(e) {
       e.stopPropagation();
});