Cara Membuat Facebook PopUp Like Box Responsive

Cara menambahkan Popup Facebook Fanspage Like Box Responsive di Blog

Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger. Pada tutorial blog kali ini saya akan berbagi sebuah widget followers/ like fanspage facebook melayang / pop up ketika blog kita di load...

Mungkin sudah banyak yang share widget pop up like box fanspage facebook responsive d blog lain, tapi apa salahnya saya juga share daripada bingung mau share apa :v

Mungkin widget dari blog lain tampilanya keren-keren, terus ada yang berdasarkan timer, tapi tidak untuk widget dari saya ini... di sini saya membuat tampilannya yang simple mini pop up facebook like box lah :v
Baca juga artikel tentang widget pop up card di bloger

Tutorial Blogger Lainnya :

• Cara Membuat Widget Pop Up Card Di Blogger

• Cara Membuat Widget Pop Up dengan waktu yang sudah di tentukan

• Membuat Widget About Me Dengan Tombol Pop Up

Berikut ini tampilan dari widget sosial media facebook pop up like box.



Untuk tutorial cara pemasangannya cukup mudah, silahkan simak tutorial berikut ini.......

Cara Membuat Popup Like Facebook di Blog

• Login Ke blogger.com

• Terus ke Template, Edit HTML, Cari Kode </body>

• Lalu masukan kode berikut diatasnya..

<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') {
    $('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast
    $('#tamvan-close, #tamvan-exit').click(function () {
      $('#tamvan-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>
<div class='mas_tamvan'>
<div id='tamvan-back'>
  <div id='tamvan-exit'> </div>
  <div id='tamvan-box'>
    <div class='tamvan-box-inner'>
      <div id='tamvan-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/facebook/&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>

Silahkan ganti url ini https://www.facebook.com/facebook/ dengan url Fanspage facebook kalian...

Jika kalian ingin agar widget pop up facebooknya muncul di setiap kali buka blog /post di hari yang sama, silahkan ganti nilai pada kode ini expires: 5 menjadi 0 (Angka Nol) expires: 0

Jika pop upnya tidak muncul / tidak bisa di klos, tutup. silahkan masukan kode berikut di atas </head>


<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

• Lanjut, masih di edit HTML, sekarang kalian cari kode </head>. Lalu masukan css berikut di atasnya...

<style type='text/css'>
#tamvan-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#tamvan-exit{width:100%;height:100%}
.tamvan-box-inner{width:266px;position:relative;mas_tamvan:block;padding:20px 0 0;margin:0 auto;text-align:center}
#tamvan-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;mas_tamvan:inline-block;line-height:18px;height:18px;width:18px}
#tamvan-close:hover{color:#06c}
#tamvan-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){.mas_tamvan{position:fixed;top:50%;left:50%}#tamvan-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)}.tamvan-box-inner{width:266px}#tamvan-close{right:-17px}}
#tamvan-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>

• Tinggal Save template.. done

Jika kalian ingin memasangnya di widget blogger, silahkan gunakan kode berikut saya, biar ga rumit dan ga ribet / bingung karena penjelasannya kurang komplit..

• Silahkan ke tataletak, tambahkan widget, terus pilih html javascript dan masukan kode di bawah ini ke dalamnya

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

Untuk pengaturannya sama seperti di atas...

• Save n done

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger ini bermangaat.
Apabila ada yang mau di tanyakan silahkan bertanya di kolom komentar :)