Tutorial Membuat Pop Up Floating Like Facebook di Blog Keren dan Responsif

Baca Juga

Buat kamu yang punya blog, pasti punya fanpage baik di Facebook maupun di social media lainnya. Untuk menambah like di fanpage kita, biasanya kita pasang Like Box di salah satu widget blog milik kita. Namun, kali ini saya akan share Tutorial Membuat Pop Up Floating Like Facebook di Blog Keren dan Responsif. 

Berikut adalah langkah-langkahnya:

Pertama, Login ke blogger.com

Kedua, Pilih Template>Edit HTML

Ketiga, Cari kode </body> lalu masukkan kode di bawah ini diatas </body>.

<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>

Ganti https://www.facebook.com/facebook/ dengan link Fanpage kalian masing-masing.

Keempat, cari </body> lalu copy kode di bawah ke atas </body>

<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>

Kelima, Simpan template dan hasilnya akan seperti ini

Sekian Tutorial Membuat Pop Up Floating Like Facebook di Blog Keren dan Responsif dari saya, semoga bermanfaat.

Credit: mastamvan.blogspot.co.id