Cara Menciptakan 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 menciptakan fanpage atau halaman di facebook. Guna untuk mendapat pengunjung yang banyak tentu tidak hanya mengandalkan situs perujuk google saja. Dengan menciptakan fanspage facebook Kamu sanggup mempromosikan blog Kamu dan membagikan artikel dan warta menarik di sana. Menggunakan fanpage secara maksimal dengan rajin posting dan share akan menciptakan pengikut atau yang menyukai halaman facebook akan semakin banyak.

Tetapi terkadang untuk mendapat like halaman butuh waktu yang tidak cepat. Maka dari itu tutorial cara menciptakan pop up facebook ini sanggup membantu Kamu untuk mendapat like halaman lebih banyak lagi. Meskipun ada yang menganggap popup like box FB ini mengganggu user experince, tetapi dalam tutorial ini akan dibentuk lebih responsive, sehingga pengunjung tidak merasa terganggu alasannya yaitu munculnya popup tersebut alasannya yaitu 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 imbas double click to select

Menurut Saya pop up di blog yaitu salah satu alternatif selain memakai widget di sidebar blog. Bahkan lebih efektif alasannya yaitu popup melayang ini akan muncul dikala pengunjung membuka halaman blog. Karena letaknya melayang sempurna di tengah halaman, maka tentu akan berpeluang lebih banyak di lihat bahkan sanggup 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 menciptakan pop up like box facebook di blog yang responsive.

Cara menciptakan pop up fanpage facebook di blog

#1  Buka dashbor blogger

#2 Pilih sajian Tata Letak

#3 Klik tambahkan gadget dan pilih klik HTML/Javascript

#4 Masukkan arahan 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 arahan #696969 dengan warna sesuai selera.

Demo

Demikian artikel mengenai cara menambahkan pop up like box fanspage facebook di blog ini. Semoga sanggup mempunyai kegunaan dan sanggup diterapkan di blog. Apabila ada yang ditanyakan atau kurang terang mengenai tutorial menciptakan pop up di blog yang akan muncul secara otomatis dikala di buka pertama kali ini, silahkan tinggalkan komentar di bawah postingan ini.