Cara Membuat Pop Up Fanpage Facebook Responsive di Blog

Cara Membuat Pop Up Fanpage Facebook Responsive di Blog - Halo sobat, kali ini saya akan membuat tutorial Cara membuat Pop Up Fanpage Facebook seperti yang ada diblog ini.

Dengan membuat Fanpage atau Halaman Facebook, kamu dapat mempromosikan dan share artikel blog agar mendapatkan visitor yang lebih banyak lagi.

Menurut saya sendiri Pop Up ini lebih bagus dari pada widget yang ditaruh disidebar, karena pengunjung akan melihat like box fanpage kita ditengah pas saat dia membuka situs kita

Cara Membuat Pop Up Like Box Facebook Responsive

#1 Buka Dashboard Blogger

#2 Pilih Menu Tata letak

#3 Klik Tambahkan Gadget, dan Pilih HTML/Javascript

#4 Masukan kode dibawah 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/infinityxsamz.com&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 url fanpage facebook saya dengan url fanpage facebook anda.

DEMO

Terimakasih Telah berkunjung ke situs kami.