Cara Membuat Widget Pop up Facebook Like Box Ringan

Pop up Facebook Like Box

Situs sosial media seperti Facebook memang sudah menjadi hal penting bagi para pemilik blog dan tidak bisa dipisahkan. Dengan media social tersebut dipercaya mampu meningkatkan trafik blog. Pop up Facebook Like Box ini mampu meningkatkan follower Fans Page blog karena langsung berinteraksi dengan pengunjung blog.
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">&times;</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

Share this post