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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

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&amp;width=350&amp;height=350&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;header=false' style='border:none;overflow:hidden;width:100%;height:250px;'></iframe>

  </div></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.

Bài viết: Hướng dẫn tạo Popup Facebook Like Box cho blogspot được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog Popup