Cara Pasang Pop Like Box Facebook di Blog

Ketemu lagi dengan admin yang cakep ini tentu saja di blog masukangin.net yang selalu siap memberikan inspirasi-inspirasi menarik tentang dunia jagat maya ini. Kali ini admin akan berbagi sesuatu hal yakni cara memasang Pop Like Box Facebook di Blog yang pastinya responsive dan dijamin keren.

Sebagaimana ketahui dengan kita memasang fasnpage facebook ke blog anda akan meningkatkan traffic pada blog anda. Coba bayangkan kalo yang like fanspage anda itu sekitar 50 ribu. Wah blog anda akan rame kayak pasar.

Pop like box ini sangat responsive tidak akan membenani kecepatan blog anda. Jadi tidak usah ragu-ragu untuk memasang widget ini. Simak ulasannya di bawah ini:

Cara Pasang Pop Like Box Facebook di Blog Responsive

Login terlebih dahulu ke Blogger tercinta
Pilih Tata Letak, lalu Tambahkan Gadget (terserah dimana saja).
Selanjutnya pilih HTML/Javascript

Copy paste kode dibawah ini kedalam HTML/Javascript itu. (judul dikosongin aja).


<!--Kode CSS-->
<style type='text/css'>
#ryll09-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#ryll09-exit{width:100%;height:100%}
.ryll09-box-inner{width:266px;position:relative;blog_ryll09:block;padding:20px 0 0;margin:0 auto;text-align:center}
#ryll09-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;blog_ryll09:inline-block;line-height:18px;height:18px;width:18px}
#ryll09-close:hover{color:#06c}
#ryll09-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_ryll09{position:fixed;top:50%;left:50%}#ryll09-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)}.ryll09-box-inner{width:266px}#ryll09-close{right:-17px}}
#ryll09-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') {
    $('#ryll09-back').delay(400).fadeIn("fast"); // options slow or fast
    $('#ryll09-close, #ryll09-exit').click(function () {
      $('#ryll09-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_ryll09'>
<div id='ryll09-back'>
  <div id='ryll09-exit'> </div>
  <div id='ryll09-box'>
    <div class='ryll09-box-inner'>
      <div id='ryll09-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/ryll09/&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;'/>
    </iframe></div>
  </div>
</div>
</div>