Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Tạo widget Fanpage cho blogspot

3 min read
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

Tạo widget Fanpage cho blogspot
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

You may like these posts

  • Thêm một Tiện ích liên hệ zalo gọi điện cho trang web hoặc blogspot, tiện ích hiển thị đẹp bao gồm zalo, messenger, gọi điện và maps.Blogspot của bạn đang bán hàng hoặc làm dị…
  • .container-video{position:relative;width:100%;overflow:hidden;padding-top:56.25%} .video-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:non…
  • Bài viết này mình Hướng dẫn code Ajax Breaking New cho blogger phù hợp làm mục tin Hot, trending, bài viết mới, bài viết theo danh mục nhãn.Demo Breaking News Các bư…
  • Dùng CSS thay thế thư viện JavaScript nếu như bạn biết đến những CSS này thì không cần phải sử dụng thư viện ngoài của JavaScript. Giúp cho blogspot của bạn cải thiện đáng kể …
  • .preloader{position:fixed;top:0;bottom:0;right:0;left:0;z-index:1000;background:#fff} .preloader .wrapLoading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-web…
  • Xin chào các bạn, trong bài viết này, mình chia sẻ cách tạo Thiết kế dòng thời gian timeline chuẩn responsive trên mobile chỉ sử dụng HTML và CSS. Các bạn có thể xem demo…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More