Oke temen-temen pada kesempatan kali ini saya akan membagikan sebuah tips atau cara membuat sebuah popup dengan tombol close untuk like facebook/fb yang biasa temen-temen liat paa sebuag blog atau web muncul ketika temen-temen mengunjungi sebuah halaman web atau blog. tentunya ini sangat berguna sekali untuk menambah visitor atau pengunjung pada sebuah website atau blog dengan membuat fanspage di facebook.

Oke kita akan alangsung saja, sebelum temen2 menerapkan ini yang saya jelaskan pada tutorial kali ini adalah pada sebuah blogspot, jika temen-temen ingin menerapkan ini pada sebuah blog wordpress atau blog bikinan sendiri bisa temen-temen kustem saja, tinggal temen-temen copy/paste saja kode yang berada dibawah di bagian kode html pada sebuah website.

Cara Membuat Popup Like Facebook di Blogspot

Langkah-langkahnya adalah

1. Masuk ke akun blogger temen-temen

2. Pilih menu tata letak, pilih tambah widget silahkan taruh dimana saja 

3. Masukkan script dibawah ini biarkan judul di kosongkan dan taruh di content

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>script>
<style type="text/css">
#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 {
    border: 5px solid #1194f2;
    width: 339px;
    height: 212px;
    position: absolute;
    top: 30%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 1px;
}
#fbox-button:before {
    content: "x";
    padding: 1px 7px 4px 7px;
    background: #ff4e4e;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    border-radius: 10px;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:0px}
style>
<script type='text/javascript'>
//
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[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/Medikre/120574614736021&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 212px;'>iframe>
div>
div>

Oke pengaturannya adalah silahkan ganti kode  https://www.facebook.com/Medikre dengan kode fanspage fb temen-temen dan kode #1194f2 bisa temen-temen ganti untuk mengubah warna.

4. Setelah itu silahkan Klik simpan dan silahkan dicoba hasilnya

Sekian tutorial kali ini semoga berhasil dan semoga membantu silahkan tinggalkan komentar anda bila menyukai tutorial ini. Terimakasih sudah berkunjung.