Install Script Ouibounce to Blogger

Dapat lagi artikel fresh and unique! Ouibounce memungkinkan kita untuk menampilkan sebuah modal/popup konten sebelum pengunjung meninggalkan blog/web anda. Membantu untuk meningkatkan tingkat konversi halaman arahan. Ouibounce ini sangat mudah untuk diinstal dan dilengkapi dengan fitur canggih, yang membantu sobat mengendalikan setiap aspek dari pengalaman pengguna. Itu penjelasan versi google translate singkat ceritanya versi AA begini...Buka screenshot secara full-image, perhatikan tanda anak bawang, eh salah anak panah mksdx! Setiap kalian mengarahkan ke daerah tersebut (ketika mau menutup tab browser) maka akan muncul modal/popup karya master Carl Sednaoui :-"Demo, source file, keterangan script bisa dilihat pada halaman sumber!

github.com/carlsednaoui/ouibounce

Cara memasukan ramuan Ouibounce ke dalam template blog sebenarnya sama dengan tutorial lainnya :D Jika bagi sobat yg sudah mempunyai konten modal/popup/lightbox sendiri, berarti tinggal memasangkan bumbu ouibouncenya saja! Koben akan membantu pemasangan seperti demo berikut jsfiddle.net/bebenkoben/A9uQn/show

#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: 500;
}
#ouibounce-modal .modal-body {
padding: 10px;
font-size: 0.9em;
}
#ouibounce-modal p {
color: #344a5f;
line-height: 1.3em;
}
#ouibounce-modal form {
text-align: center;
margin-top: 35px;
}
#ouibounce-modal form input[type=text] {
padding: 12px;
font-size: 1.2em;
width: 300px;
border-radius: 4px;
border: 1px solid #ccc;
-webkit-font-smoothing: antialiased;
}
#ouibounce-modal form input[type=submit] {
text-transform: uppercase;
padding: 12px;
font-size: 1.1em;
border-radius: 4px;
color: #fff;
background-color: #4ab471;
border: none;
cursor: pointer;
-webkit-font-smoothing: antialiased;
}
#ouibounce-modal form p {
text-align: left;
margin-left: 35px;
opacity: 0.8;
font-size: 0.9em;
}
#ouibounce-modal .modal-footer {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
#ouibounce-modal .modal-footer p {
text-transform: capitalize;
cursor: pointer;
display: inline;
border-bottom: 1px solid #344a5f;
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes popin {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-ms-keyframes popin {
0% {
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes popin {
0% {
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
85% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}

Letakan script Ouibounce di atas tag </head> Tetapi kalau mau mencoba di atas tag </body> boleh juga ;) Markup HTML dan script pemanggil letakan sebelum tagging </body>

<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" placeholder="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>
 
<script>
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();
});
</script>

Jika memang ingin memasang seperti yg di atas, maka ganti account feedburner beben-koben Ingat jquery script harus sudah terpasang, karena script panggilan pake teknik jquery. Untuk settingan script ouibounce sobat bisa baca di web sumber yah github.com/carlsednaoui/ouibounce. Karena AA tidak paham script ;)) :">

Isikan konten modal window sesuai dengan keperluan. Bisa kotak langganan via email, widget page facebook, pinterest embed photo or instagram, twitter gadget n etc.

Happy ouibounce \m/