Cara Membuat FansPage Facebook Melayang Di Blog

Cara Membuat FansPage Facebook Melayang Di Blog - Welcome back brother.. untuk pertama kalinya Tut-Blogger memiliki Fanspage Facebook. Fanspage Facebook Tut-Blogger baru saja dibuat kemarin malam oleh saya sendiri selaku admin dari blog Tut-Blogger. Diartikel hari ini saya akan memberikan sebuahtutorial cara memasang fanspage facebook di blog.

Cara Membuat FansPage Facebook Melayang Di Blog. Fanspage Facebook merupakan bagikan dan kompenen penting dalam membuat sebuah blog. Apa sih sebenarnya fungsi fanspage facebook ? Saya sendiri sih beralasan Fanspage Facebook dibuat agar pengunjung dapat mengetahui update terbaru seputar blog yang telah dibuat fanspagenya.Cara memasang fanspage facebook di blog ini sangat-sangat, berikut ini lah screenshootnya.

Fanspage Facebook Tut-Blogger

Nah itulah nanti yang akan saya berikan tutorialnya.. Lumayan ringan loh widget fanspage facebook melayang ini.Dari pada berlama-lama saya bahasnya berikut ini dia caranya.

Cara Membuat FansPage Facebook Melayang Di Blog

1. Pertama kalian login terlebih dahulu ke Blog kalian
2. Kemudian klik layout dan buat widget/gadget baru
3. Oh iya.. Pastikan kalian sudah membuat Fanspagenya ya,lalu copy alamat fanspagenya
4. Silahkan copy sript yang akan saya share dibawah dan ganti tulisan yang saya beri warna dengan alamat fanspage facebook kalian
5. Klik save, selesai..

Ini dia script Fanspage Facebook Melayang Di Blog

<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/AVvXsEjFPpXNNf_NugVxUGIJfF8SupK_SDVtK5mp0xmANBRDEHBhJ6LoFgA9VrUO-oarGKcjRRHFaCyjtyPBCbE_9gbIlQlV7ZX26L1ly4Iptz3ALeGJecMsQf3u37rkBu_f4_qAk6yySpIr5WaR/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(1000).fadeIn('medium');

    $('#fanclose, #fan-exit').click(function(){

      $('#fanback').stop().fadeOut('medium');

    });

  }

  $.cookie('popup_facebook_like', 'yes', { path: '/', expires:0});

});

</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=https://www.facebook.com/TutBloggerID&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>

<script src="https://safelinkconverter.com/js/safelinkconverter.js" type="text/javascript"></script>

**Penting

Ganti tulisan tebal berwarna merah dengan link Fanspage facebook yang akan dibuat melayang di blog.

Itulah Cara Membuat FansPage Facebook Melayang Di Blog . Jika kalian bingung silahkan tanyakan di komentar. Oh iya jangan lupa Like Fanspage facebook. 

Share this post