Cara Membuat Pop Up Fanpage Facebook Responsive di Blog

Cara Membuat Pop Up  Fanpage Facebook Responsive di Blog - Kali ini rekblogging akan membagikan info mengenai tutorial membuat pop up like box facebook di blog yang responsive. Banyak cara yang dilakukan oleh para blogger untuk menunjang popularitas web, salah satunya ya dengan membuat fanpage atau halaman di facebook. Guna untuk mendapatkan pengunjung yang banyak tentu tidak hanya mengandalkan situs perujuk google saja. Dengan membuat fanspage facebook Kamu bisa mempromosikan blog Kamu dan membagikan artikel dan informasi menarik di sana. Menggunakan fanpage secara maksimal dengan rajin posting dan share akan membuat pengikut atau yang menyukai halaman facebook akan semakin banyak.

Tetapi terkadang untuk mendapatkan like halaman butuh waktu yang tidak cepat. Maka dari itu tutorial cara membuat pop up facebook ini dapat membantu Kamu untuk mendapatkan like halaman lebih banyak lagi. Meskipun ada yang menganggap popup like box FB ini mengganggu user experince, tetapi dalam tutorial ini akan dibuat lebih responsive, sehingga pengunjung tidak merasa terganggu karena munculnya popup tersebut karena dilengkapi dengan tombol close dan durasi waktu munculnya pop up. Dan pop up blog ini hanya akan tampil sekali pada IP yang sama.

Baca juga : Membuat seleksi teks otomatis efek double click to select

Menurut Saya pop up di blog adalah salah satu alternatif selain menggunakan widget di sidebar blog. Bahkan lebih efektif karena popup melayang ini akan muncul ketika pengunjung membuka halaman blog. Karena letaknya melayang tepat di tengah halaman, maka tentu akan berpeluang lebih banyak di lihat bahkan bisa jadi tidak sengaja di klik. Coba Kamu bandingkan antara widget facebook di sidebar dengan facebook popup di blog. Lebih baik yang mana?

Langsung saja akan Saya berikan langkah-langkah bagaimana cara membuat pop up like box facebook di blog yang responsive.

Cara membuat pop up fanpage facebook di blog

#1  Buka dashbor blogger

#2 Pilih menu Tata Letak

#3 Klik tambahkan gadget dan pilih klik HTML/Javascript

#4 Masukkan kode di bawah ini dan simpan

<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{background:#fff;border:3px solid #696969;width:400px;height:230px;position:absolute;top:33%;left:37%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}#fbox-button{float:right;cursor:pointer;position:absolute;right:6px;top:6px}#fbox-button:before{content:"X";padding:5px 8px;background:#696969;color:#fff;font-weight:400;font-size:10px;font-family:inherit}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:8px;text-decoration:none;text-align:center;padding:5px}
</style>
<script type='text/javascript'>
//<![CDATA[
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('fast');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('fast');
});
}
$.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/rekblogging&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:394px;height:200px;'></iframe>
</div>
</div>

Catatan:

Ganti https://www.facebook.com/rekblogging dengan url halaman facebook kalian.

Untuk mengubah warna tepi pop up, ubah kode #696969 dengan warna sesuai selera.

Demo

Demikian artikel mengenai cara menambahkan pop up like box fanspage facebook di blog ini. Semoga bisa berguna dan bisa diterapkan di blog. Apabila ada yang ditanyakan atau kurang jelas mengenai tutorial membuat pop up di blog yang akan muncul secara otomatis ketika di buka pertama kali ini, silahkan tinggalkan komentar di bawah postingan ini.