Cara Membuat Widget Pop up Facebook Like Box Ringan

Cara Membuat Widget Pop up Facebook Like Box Ringan

Translate
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

Lihat Juga

Cara membuat widget Pop up Facebook Like Box / Sosial media Ringan tanpa memberatkan blog.,
Reaksi :
Share :
Print/Save
Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Halaman relevan lainnya
Beri Komentar