Hướng dẫn tạo Popup Facebook Like Box cho blogspot

Sau đây mình Hướng dẫn tạo Popup Facebook Like Box cho blogspot đẹp mắt đơn giản giúp bạn có thể tăng lượt thích cho trang facebook của các bạn.

Hướng dẫn tạo Popup Facebook Like Box cho blogspot



Và các bước thực hiện như sau:

Bước 1: Thêm CSS trong thẻ <b:skin>


#fb-fanbox{display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0)}
#fb-boxclose{width:100%;height:100%;-webkit-transform:translateZ(0)}
#fb-boxview{background:#fff;border:8px solid #414B82;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px}
#fb-closebox{float:right;cursor:pointer;position:absolute;right:-1px;top:-2px}
#fb-closebox:before{content:"CLOSE";background:#414B82;color:#fff;font-weight:400;font-size:10px;font-family:inherit;padding:5px 8px}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px}


Bước 2: Thêm HTML trước </body>


<div id='fb-fanbox'>
  <div id='fb-boxclose'>
  </div>
  <div id='fb-boxview'>
    <div id='fb-closebox'>
    </div>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/hoablogger&width=350&height=350&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border:none;overflow:hidden;width:100%;height:250px;'></iframe>
  </div>


Bước 3: Thêm jQuery trước </body>


<script>
  //<![CDATA[
  jQuery.cookie = function(key, value, options) {
    // Pengaturan 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(''));
    }
    // Dapatkan 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;
  };
  jQuery(document).ready(function($) {
    if ($.cookie('popup_facebook_box') != 'yes') {
      $('#fb-fanbox').delay(3000).fadeIn('fast');
      $('#fb-closebox, #fb-boxclose').click(function() {
        $('#fb-fanbox').stop().fadeOut('fast');
      });
    }
  });
  //]]>
</script>


Cuối cùng thì các bạn chỉnh lại địa chỉ fanpage, chỉnh CSS cho phù hợp. Như vậy là các bạn đã thêm được Popup Facebook like box cho blogspot đơn giản và đẹp mắt.
Xem thêm

Nhận xét