Cara Membuat Widget Pop up Facebook Like Box Ringan
Juli 02, 2016

Pop up muncul seketika setelah halaman blog kita termuat. Dengan menambahkan Konfigurasi JavaScript CooKie pop up ini hanya muncul sekali dengan rentan waktu yang ditentukan.
Pop Up HTML
<div id="kotak-dialog">
<h3 class="title">Sukai Halaman<a href="#" class="close">×</a></h3>
<div id="iframeContainer">Isi Kode Social Media Anda</div>
</div>
<div id="dialog-overlay"></div>
Pop Up CSS
Untuk CSSnya silahkan berkreasi sendiri dengan memodifikasi style css di bawah ini.#kotak-dialog {
position:absolute;
top:20%;
left:50%;
margin:0px 0px 0px -200px;
max-width:400px;
height:auto;
background-color:#fff;
-webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);
z-index:1000;
display:none;
}
#kotak-dialog *:focus {
outline:none;
}
#kotak-dialog h3.title {
background-color:#3B5998;
padding:10px 15px;
color:#fff;
font:normal 16px Arial, Sans-Serif;
margin:0px 0px 0px 0px;
position:relative;
}
#kotak-dialog h3.title a {
position:absolute;
top:10px;
right:15px;
color:#fff;
text-decoration:none;
cursor:pointer;
}
#dialog-overlay {
position:fixed !important;
position:absolute;
z-index:999;
top:0px;
right:0px;
bottom:0px;
left:0px;
background-color:#000;
opacity: 0.10;
display:none;
}
Pop Up JavaScript
Simpan kode di bawah ini di atas</body>
var $dialog = $('#kotak-dialog'),
$overlay = $('#dialog-overlay'),
$frame = $('#iframeContainer');
// Check
if (!readCookie('fb_box_once')) {
$(window).load(function () {
$dialog.show();
$overlay.fadeTo(400, 0.8);
return false;
});
}
$dialog.find('.close').click(function () {
// Set
createCookie('fb_box_once', null, 9999);
$dialog.fadeOut('normal', function () {
$frame.remove();
});
$overlay.hide();
return false;
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else {
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
DTE:] : http://www.dte.web.id/2012/05/konfigurasi-javascript-cookie.html