Sunday, March 15, 2015

Cara Membuat Widget Pop Up Like Facebook di Blogger

Tekhnik Membuat Widget Pop Up Like Facebook 

Pada kesempatan sebelumya, kami pernah menerangkan perihal Tekhnik Membuat Widget Like Facebook (bagi yang belum tahu silahkan klik di sini) Kali ini, kita akan membagikan Tekhnik Untuk Membuat Widget Pop Up Like Facebook.

Nah, kalian kemungkinan pastii menginginkan jikalau setiap ada pengunjung yang mengunjungi blog anda seketika tahu juga dengan Fanpage anda. Tekhniknya yakni dengan menciptakan pop up like facebook.

Pertama-tama silahkan buka dahulu dashboard blog anda dan silahkan langsung saja menuju ke bagian tata letak. Lalu, silahkan klik Tambahkan / Add Widget dan pilihlah HTML / JAVASCRIPT dan silahkan untuk copy lalu pastekan kode di bawah ini ke widget anda

<gaya>
#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:mutlake;
  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:(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyxXdHwxRCfhw6k3kmt0022Lz42othBcFbtH76cp4RzicZ-8tp0D7ysg-oII2SKMdAyiPQCmkSuXae4knxCkEWDfBVQHhgUVoW8I42coss5PTfP9fjEdbOyCwNRWRfRI6giNPLtVdl_U4b/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;
}
</gaya>
<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' gaya='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
  </div>
</div>


Itulah kodenya, silahkan diutak-atik suka-suka hati asalkan tahu bahasa pemogramannya saja. Setelah itu, silahkan klik save dan jangan lupa save yang ada di atas juga. Jikalalu sudah, maka silahkan cek blog anda untuk memastikan telah bisa muncul belum pop up nya. Oh ya, pop upnya itu cuma muncul bagi yang memang baru pertama kalinya mengunjungi blog atau website anda. Kalau telah pernah berkunjung sebelumnya maka biasanya kalau dibiarkan selama berapa hari tak dibuka pastii akan muncul lagi pop upnya.

Demikianlah yang bisa kami sampaikan saat ini. Mohon maaf apabila terkandung kesalahan, sampai jumpa dan salam SUKSES

0 komentar: