Membuat Pop Up FansPage Facebook di Blogspot

Membuat Pop Up FansPage Facebook di Blogspot || Hello sobat. Pasti kalian pernah menjumpai saat buka blog milik teman kemudian sebelum masuk ada semacam kotak dialog yang isinya FansPage Facebook bukan?

Nah kali ini ane mau share buat para blogger sekalian, yang kepengen bin niat mau buat Pop Up FansPage Facebook. Dibawah ada SS tampilannya.

Maap ye belum ada yang ngelike, baru pasang soalnya.hehe Ya barangkali kalian para blogger, IMer keren mau ngeluangin waktu bentar buat ngelike.hehe

Langsung saja ya, kita coba buat fanspage tersebut.

1. Buka akun blogger.
2. Pilih menu Tata letak > Tambah gadget > Html Javasript
3. Letakan kode di bawah ini di kolom dan klik save

Kode untuk PopUp

<style>

#fbox-background {

    display: none;

    background: rgba(0,0,0,0.8);

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 99999;

}

#fbox-close {

    width: 100%;

    height: 100%;

}

#fbox-display {

    background: #eaeaea;

    border: 5px solid #828282;

    width: 340px;

    height: 230px;

    position: absolute;

    top: 32%;

    left: 37%;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}

#fbox-button {

    float: right;

    cursor: pointer;

    position: absolute;

    right: 0px;

    top: 0px;

}

#fbox-button:before {

    content: "CLOSE";

    padding: 5px 8px;

    background: #828282;

    color: #eaeaea;

    font-weight: bold;

    font-size: 10px;

    font-family: Tahoma;

}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {

    color: #aaaaaa;

    font-size: 9px;

    text-decoration: none;

    text-align: center;

    padding: 5px;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...

if (arguments.length > 1 && String(value) !== "[object Object]") {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === 'number') {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), '=',

options.raw ? value : encodeURIComponent(value),

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

options.path ? '; path=' + options.path : '',

options.domain ? '; domain=' + options.domain : '',

options.secure ? '; secure' : ''

].join(''));

}

// key and possibly options given, get cookie...

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

if($.cookie('popup_facebook_box') != 'yes'){

$('#fbox-background').delay(5000).fadeIn('medium');

$('#fbox-button, #fbox-close').click(function(){

$('#fbox-background').stop().fadeOut('medium');

});

}

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fbox-background'>

<div id='fbox-close'>

</div>

<div id='fbox-display'>

<div id='fbox-button'>

</div>

<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/Imadoes-1068022833242793&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>

<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>

</div>

</div>

Kode merah, kalian ganti dengan FansPage Facebook milik sobat. Udah gitu tok, Kalo ada masalah bisa komentar dibawah ya.. 

Thanks. Semoga bermanfaat.