Tạo widget Fanpage 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é!

Bài viết này mình hướng dẫn các bạn cách Tạo widget Fanpage cho blogspot đơn giản, đẹp mắt. Widget Fanpage sẽ nằm cố định bên phải blog của các bạn, khi chúng ta click vào nó thì hiện thị widget chứa Fanpage Facebook.

Các bạn có thể xem demo trên bài viết này

Cách làm đơn giản là bạn chỉ cần copy toàn bộ code bên dưới dán trước thẻ đóng </body> (lưu ý là dán trước hàng </body>)

<style>

  /*<![CDATA[*/

.fanpager-widget{height:auto;width:0;position:fixed;right:0;top:40%;z-index:999;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;transition:all 0.35s ease;-webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}

.fanpager-widget.open_sidefanpage{-webkit-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);width:340px}

.fanpager-widget .wrap{position:relative}

.fanpager-widget .wrap .title_fb{width:152px;display:inline-block;font-size:16px;font-family:"Roboto",sans-serif;padding:0 25px;line-height:45px;height:45px;background:#3b5999;transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);color:#fff;position:absolute;left:-98px;top:65px;cursor:pointer}

.fanpager-widget .wrap .title_fb span{float:left;padding-left:30px;position:relative;cursor:pointer}

.fanpager-widget .wrap .title_fb span i{position:absolute;top:15px;left:0}

.fanpager-widget .wrap .fb_iframe_widget{width:auto}

.fanpager-widget .wrap .fb_iframe_widget span{max-height:130px;height:130px!important}

.fanpager-widget .wrap .fb_iframe_widget iframe{width:100%!important;height:100%!important}

.fanpager-widget .wrap .fb_iframe_widget{display:inline-block;position:absolute;top:12px;border:solid 10.5px #3b5999;border-left:none;border-right:none}

  /*]]>*/

</style>

<div class='fanpager-widget'>

  <div class='wrap'>

    <div class='title_fb'><span><i class='fab fa-facebook-square'></i>Facebook</span></div>

    <div class='fb-page' data-adapt-container-width='true' data-height='220' data-hide-cover='false' data-href='https://www.facebook.com/hoablogger' data-show-facepile='true' data-small-header='false' data-tabs='timeline'>

      <div class='fb-xfbml-parse-ignore'>

        <blockquote cite='https://www.facebook.com/hoablogger'>

          <a href='https://www.facebook.com/hoablogger'>Facebook</a>

        </blockquote>

      </div>

    </div>

  </div>

</div>

<div id='fb-root'></div>

<script>

  //<![CDATA[

  (function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0];

    if (d.getElementById(id)) return;

    js = d.createElement(s);

    js.id = id;

    js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6";

    fjs.parentNode.insertBefore(js, fjs);

  }(document, 'script', 'facebook-jssdk'));

  window.addEventListener("load", function() {

    $('.fanpager-widget').click(function(e) {

      e.stopPropagation();

      $(this).toggleClass('open_sidefanpage');

    });

    $("body").click(function() {

      $(".fanpager-widget").removeClass('open_sidefanpage');

    })

  })

  //]]>

</script>

Các bạn đổi lại link trên thành link fanpage của bạn và lưu lại là xong, nếu cần hỗ trợ hãy để lại nhận xét ở bài viết này.

Blogspot phải sử dụng thư viện fontawesome, nếu blog của bạn có dùng thì bỏ qua bước này, nếu chưa có thì copy dán trước thẻ đóng </body>

<script>

  //<![CDATA[ 

  function loadCSS(e, t, n) {

    "use strict";

    var i = window.document.createElement("link");

    var o = t || window.document.getElementsByTagName("footer")[0];

    i.rel = "stylesheet";

    i.href = e;

    i.media = "only x";

    o.parentNode.insertBefore(i, o);

    setTimeout(function() {

      i.media = n || "all"

    })

  }

  loadCSS("https://use.fontawesome.com/releases/v5.7.2/css/all.css");

  //]]> 

</script>

Facebook

Facebook

Bài viết: Tạo widget Fanpage 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 Contact-widget