Cara Mudah Membuat Pop Up Like Box Facebook di Blog (Responsive)

KENEONO - Dikesempatan kali ini saya akan share Cara Memasang Fanspage Facebook di Blog (Responsive). Mungkin sobat pernah menemui semacam fanspage yang muncul tiba-tiba di tengan postingan saat kita kunjungi blog orang, nah disini saya akan mencoba untuk memberikan tutorial cara membuatnya.

Berikut Cara Mudah Membuat Pop Up Like Box Facebook di Blog (Responsive) :

- Pertama silakan sobat masuk dashboard blogger > Tata Letak > dan Tambahkan Gadget.

- Kemudian pilih HTML/JavaScript.

- Kalau sudah masukkan script di bawah ini. (gunakan mode HTML). judul tidak usah diisi. (dan jangan lupa url https://www.facebook.com/webkeneono/ ganti dengan url fanspage sobat ).

<!--Kode CSS-->
<style type='text/css'>
#keneono-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#keneono-exit{width:100%;height:100%}
.keneono-box-inner{width:266px;position:relative;blog_keneono:block;padding:20px 0 0;margin:0 auto;text-align:center}
#keneono-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;blog_keneono:inline-block;line-height:18px;height:18px;width:18px}
#keneono-close:hover{color:#06c}
#keneono-box{min-width:310px;min-height:240px;position:absolute;top:50%;left:50%;margin:-220px 0 0 -170px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;max-height:253px}
@media (max-width:380px){.blog_keneono{position:fixed;top:50%;left:50%}#keneono-box{min-width:310px;min-height:240px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.keneono-box-inner{width:266px}#keneono-close{right:-17px}}
#keneono-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style>
<!--Kode Javascript-->
<script type='text/javascript'>
//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { 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() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
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; };
// the pop up actions
$(function ($) {
  if ($.cookie('popup_fb') != 'yes') {
    $('#keneono-back').delay(400).fadeIn("fast"); // options slow or fast
    $('#keneono-close, #keneono-exit').click(function () {
      $('#keneono-back').stop().fadeOut("fast"); // options slow or fast
    });
 }
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 5 });
});
//]]>
</script>
<!--Kode HTML-->
<div class='blog_keneono'>
<div id='keneono-back'>
  <div id='keneono-exit'> </div>
  <div id='keneono-box'>
    <div class='keneono-box-inner'>
      <div id='keneono-close'>
        <img src='https://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
      </div>
      <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/webkeneono/&amp;width=290&amp;height=275&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
    </div>
  </div>
</div>
</div>

- Terakhir Save, Selesai silakan kunjungi blog sobat untuk memastikan scriptnya berjalan dengan baik.

Sekian artikel kali ini tentang Cara Mudah Memasang Fanspage Facebook di Blog (Responsive). Semoga bermanfaat untuk sobat semua...

Kunjungi blog ini terus untuk mendapatkan artikel menarik lainnya. Terimakasih...