Cara Membuat Fanspage Melayang Pada Blog

Halo Kawan, sesuai dengan permintaan teman saya, kali ini saya akan memberikan tutorial bagaimana cara membuat fanspage kita berada pada bagian awal blog, atau tampilan depan blog kita, atau lebih tepatnya melayang di blog kita.

Cara Membuat Fanspage Melayang Pada Blog

Keuntungannya apa sih kalau dibuat kayak gitu min...?

ya tidak ada keuntungannya sih, hanya saja si pengunjung secara tidak langsung disuruh melike fanspage secara paksa hehehe.

Oke langsung saja kita mulai tutorialnya.

Cara Membuat Fanspage Melayang Pada Blog

1). Masuk ke Menu Dashboar kalian, kemudian pilih Tata Letak > Tambahkan Widget > HTML / Javascript.

2). Masukkan Source Code dibawah ini, untuk judul bisa kalian kosongi terlebih dahulu

Script Lengkap

<style scoped='' type='text/css'>
#fb-fanbox {background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);display:none;}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#f5f5f5;border:8px solid #3a76b4;width:339px;height:210px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#3a76b4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink 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) {
// Pengaturan 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(''));
}
// Dapatkan 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'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/softwareengineering2&width=402&height=240&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:300px;height:195px;'></iframe>
</div>
</div>

Catatan : 
untuk teks yang diberi warna merah, bisa kalian ganti dengan fanspage yang kalian miliki. jika kalian belum memiliki fans page, silahkan kalian baca-baca tutorial dibawah ini.

Baca : Cara Membuat Fanspage di Facebook Terbaru 
Baca : Cara Menampilkan Fanspage Pada Blog 

Dan Tampilannya akan nampak seperti pada gambar dibawah ini :

Hasil Fanspage Melayang Pada Blog

Bagaimana.? sukses bukan, pastinya dong, kalau kalian mengalami kesulitan dalam proses pembuatan fans page melayang diatas, silahkan kalian dapat meninggalkan pada bagian bawah artikel ini, seceptanya saya akan membalasnya, terima kasih.