Home » , , » Cara Membuat Widget Pop Up Like Facebook di Blogger

Cara Membuat Widget Pop Up Like Facebook di Blogger

Cara Membuat Widget Pop Up Like Facebook 
Sebelumya, saya sudah menerangkan tentang Cara Membuat Widget Like Facebook (bagi yang belum tahu silahkan klik disini) Kali ini, saya akan membagikan Cara Untuk Membuat Widget Pop Up Like Facebook.

Nah, kalian kemungkinan pasti ingin kan kalau setiap ada pengunjung yang mengunjungi blog anda langsung tahu Fanpage anda. Caranya yaitu dengan membuat pop up like face book.

Pertama-tama silahkan buka dashboard blog anda dan silahkan langsung menuju ke bagian tata letak. Lalu, silahkan klik Tambahkan / Add Widget dan pilih HTML / JAVASCRIPT dan silahkan copy kan kode ini ke widget anda

<style>
#fanback {
  display:none;
  background:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}
#fan-exit {
  width:100%;
  height:100%;
}
#fanbox {
  background:white;
  width:420px;
  height:270px;
  position:absolute;
  top:58%;
  left:63%;
  margin:-220px 0 0 -375px;
  -webkit-box-shadow: inset 0 0 50px 0 #939393;
  -moz-box-shadow: inset 0 0 50px 0 #939393;
  box-shadow: inset 0 0 50px 0 #939393;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: -220px 0 0 -375px;
}
#fanclose {
  float:right;
  cursor:pointer;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvV7t7AC5Al3up1yyDqRVaBwkbH3DdbBPBvlejCZju15EaSFaSHOGvs3fMaiKydBv4benXR9vbuFNzIERGmpIWj5uN85Gr2thtvjBT6kKm6fLc-zAnSqSBBO8S9Xb1hhFYpmIgsBWcTL-v/s1600/fanclose.png) repeat;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}
.remove-borda {
  height:1px;
  width:366px;
  margin:0 auto;
  background:#F3F3F3;
  margin-top:16px;
  position:relative;
  margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
  color:#80808B;
  font-size:10px;
  margin: 0 auto 5px auto;
  float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
  // key and at least value given, set cookie...
  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() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
    ].join(''));
  }
  // key and possibly options given, get cookie...
  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;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
  if($.cookie('popup_facebook_like') != 'yes'){
    $('#fanback').delay(5000).fadeIn('medium');
    $('#fanclose, #fan-exit').click(function(){
      $('#fanback').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 2 });
});
</script>
<div id='fanback'>
  <div id='fan-exit'></div>
  <div id='fanbox'>
   <div id='fanclose'></div>
   <div class='remove-borda'></div>
   <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=URL FANPAGE ANDA ?ref=hl&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
  </div>
</div>


Itu kodenya silahkan boleh kok diubah asal tahu bahasa pemogramannya saja. 
Setelah itu, silahkan klik save dan jangan lupa save yang ada di atas juga. Jika sudah, silahkan cek blog anda untuk memastikan sudah bisa muncul belum pop up. Oh ya, pop upnya hanya muncul bagi yang baru pertama kali mengunjungi blog / website anda. Kalau sudah pernah berkunjung biasanya biarkan selama beberapa hari tidak dibuka pasti akan muncul pop upnya.

Demikian yang bisa saya sampaikan mohon maaf apanila ada kesalahan sampai jumpa dan salam SUKSES

1 komentar: