Cara Memasang Kotak Like Facebook Pop Up Responsive Keren Dan Simple

Like Facebook Pop Up Tutorial dari widget satu ini memang sudah banyak yang berbagi di blog lainnnya, namun kali ini beda dari pada yang lain karena kali ini hasil dari editan saya sendiri, dengan tampilan yang lebih sederhana dan pastinya keren..

Pop+Up+Facebook

Dalam Rangka meningkatkan pengunjung ke halaman facebook, teman semua harus mempromosikan halaman facebook teman untuk mendapatkan like dari pengguna yang pengunjung blog sobat.

Dan tidak diragukan lagi, dengan teman menambahkan pop up like box facebook ini di blog teman adalah salah satu cara terbaik untuk meningkatkan like dari halaman facebook teman semuanya 

Dan juga Widget Like Facebook Pop Up ini selain keren dan yang pastinya 100% sudah responsive...

Bisa di lihat screenshot dibawah... ( Dengan Versi Mobile )


Pop+Up+Facebook+Responsive


Screenshot di atas asli langsung di ambil di situs ini sakupintar.blogspot.com, karena admin juga pakai...

Dan teman-teman semua tidak perlu takut jika blog akan jadi berat karena widget ini cukup ringan yang membuat kecepatan blog tidak banyak berkurang.

Cara Memasang Kotak Like Facebook Pop Up Responsive Keren

1. Memiliki halaman di facebook , jika belum cari di google cara buat halaman facebook.
2. Masuk ke Dashbor blog kita .
3. Lalu masuk TataLetak .
4. Pilih tambahkan Gadget .
5. Pilih Html/JavaScript  .

Lalu kalian copy kode di bawah ini ke tataletak, Pada tambahkan gadget, Html/JavaScript.

<!--Kode CSS-->
<style type='text/css'>
#sakupintar-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#sakupintar-exit{width:100%;height:100%}
.sakupintar-box-inner{width:266px;position:relative;saku_pintar:block;margin:25px;text-align:center}
#sakupintar-close{cursor:pointer;position:absolute;top:-23px;right:-85px;font-size:18px;font-weight:700;color:#000;z-index:99999;saku_pintar:inline-block;line-height:18px;height:20px;width:20px}
#sakupintar-close:hover{color:#06c}
#sakupintar-box{min-width:380px;min-height:250px;position:absolute;top:50%;left:50%;margin:-110px 0 0 -195px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:transparent;max-height:238px}

@media (max-width:380px){.saku_pintar{position:fixed;top:50%;left:50%}#sakupintar-box{min-width:380px;min-height:250px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.sakupintar-box-inner{width:266px}#sakupintar-close{right:-85px}}
#sakupintar-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') {
    $('#sakupintar-back').delay(400).fadeIn("fast"); // options slow or fast
    $('#sakupintar-close, #sakupintar-exit').click(function () {
      $('#sakupintar-back').stop().fadeOut("fast"); // options slow or fast
    });
 }
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 1 });
});
//]]>
</script>
<!--Kode HTML-->
<div class='saku_pintar'>
<div id='sakupintar-back'>
  <div id='sakupintar-exit'> </div>
  <div id='sakupintar-box'>
    <div class='sakupintar-box-inner'>
      <div id='sakupintar-close'>
        <img src='http://icons.iconarchive.com/icons/kyo-tux/ginux/64/Extras-Close-icon.png' alt='Close' title='Close'/>
      </div>
      <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/sakupintar/&amp;width=360&amp;height=345&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 360px; height: 340px;text-align:center;margin:0 auto;'/>
    </iframe></div>
  </div>
</div>
</div>

Silahkan ganti url ini https://www.facebook.com/sakupintar/ 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: 1 menjadi 0 (Angka Nol) expires: 0

4. Simpan Widget

Demikin tutorial tentang Cara Memasang Kotak Like Facebook Pop Up Responsive Keren,
Jika teman semua mau bertanya langsung saja ke kotak komentar di bawah.
Terima Kasih.....
Previous
Next Post »

2 comments

sayang sekali , sepertinya tidak work di blog ane gan....

dimananya tidak work gan..

mungkin bisa di bantu..

Slahkan berkomentar di bawah ini...
EmoticonEmoticon

1f600:)
1f615:(
1f601hihi
1f60f:-)
1f603:D
1f62c=D
1f604:-d
1f61e;(
1f62d;-(
1f616@-)
1f61c:P
1f62e:o
1f606:>)
1f609(o)
1f614:p
2753:-?
1f619(p)
1f625:-s
1f620(m)
1f60e8-)
1f624:-t
1f634:-b
1f635b-(
1f637:-#
1f35c=p~
1f4b5$-)
1f44d(y)
1f33a(f)
1f60dx-)
1f496(k)
1f44f(h)
1f378cheer