4 Nhận xét

Tạo hộp thoại chia sẻ bài viết chuyên nghiệp cho Blog

Cập nhật: 24 thg 9, 2018 6:27 CH
Bài viết này mình chia sẻ cách tạo hộp thoại chia sẻ bài viết chuyên nghiệp cho Blog các bạn có thể tham khảo để thêm vào Blog của mình. Các bạn có thể xem demo trực tiếp bên dưới bài viết này.

Các bạn làm theo các bước sau:

Bước 1: Đăng nhập vào Blogger chọn Chủ đề > Chỉnh sửa HTML
Bước 2: Trong chỉnh sửa HTML chọn Chuyển đến tiện ích > Blog1
Bước 3: Thêm thẻ tag b:includable sau:

<b:includable id='shareMenu'>
<b:if cond='data:widgets.Blog.first.allBylineItems.share'>
  <div class='overlay hidden'/>
  <div class='dialog hidden'/>
  <div class='modal-dialog hidden'>
    <div class='modal-dialog-content'>
      <data:messages.linkCopiedToClipboard/>
    </div>
    <div class='modal-dialog-buttons'><button name='Ok'>Ok</button></div>
  </div>
  <div class='share-posts'>
    <button class='drops'>
      <svg>
        <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_share_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'/>
      </svg>
    </button>
    <ul class='dd-menu hidden'>
      <li>
        <a class='copy' href='javascript:void(0);' rel='nofollow' title='Sao chép liên kết'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_link_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Sao chép liên kết
        </a>
      </li>
      <li>
        <a class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=facebook&quot;' rel='nofollow' title='Chia sẻ với Facebook'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Chia sẻ với Facebook
        </a>
      </li>
      <li>
        <a class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=twitter&quot;' rel='nofollow' target='_blank' title='Chia sẻ với Twitter'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Chia sẻ với Twitter
        </a>
      </li>
      <li>
        <a class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=googleplus&quot;' rel='nofollow' target='_blank' title='Chia sẻ với Google+'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_googlePlus_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Chia sẻ với Google+
        </a>
      </li>
      <li>
        <a class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Chia sẻ với Pinterest'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_pinterest_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Chia sẻ với Pinterest
        </a>
      </li>
      <li>
        <a class='social-wrapper' expr:data-href='&quot;https://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + data:post.id + &quot;&amp;target=email&quot;' rel='nofollow' target='_blank' title='Gửi Email'>
          <svg>
            <use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_email_dark' xmlns:xlink='http://www.w3.org/1999/xlink'/>
          </svg>
          Gửi Email
        </a>
      </li>
    </ul>
  </div>
</b:if>
<script>
var postUrl = "<data:post.url/>";
//<![CDATA[
$(window).on('load', function() {
  function copyTextToClipboard(e) {
    var t = document.createElement("textarea");
    t.style.position = "fixed", t.style.top = 0, t.style.left = 0, t.style.width = "2em", t.style.height = "2em", t.style.padding = 0, t.style.border = "none", t.style.outline = "none", t.style.boxShadow = "none", t.style.background = "transparent", t.value = e, document.body.appendChild(t), t.select();
    try {
      document.execCommand("copy")
    } catch (o) {
      alert("")
    }
    document.body.removeChild(t)
  }
  $('.copy').click(function() {
    copyTextToClipboard(postUrl)
    $('.modal-dialog,.dialog').removeClass('hidden')
    $('.dialog,.modal-dialog-buttons button').click(function() {
      $('.modal-dialog,.dialog').addClass('hidden')
    })
  })
  $('button.drops').on('click', function() {
    $('.overlay,.dd-menu').removeClass('hidden')
    $('html').click(function() {
      $('.overlay,.dd-menu').addClass('hidden')
    })
  })
  var postEl = document.getElementsByClassName('social-wrapper');
  var postCount = postEl.length;
  for (i = 0; i < postCount; i++) {
    postEl[i].addEventListener("click", function(url, w, h) {
      var url = this.getAttribute("data-href");
      var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
      var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
      var h = 500;
      var w = 500;
      var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
      var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
      var left = ((width / 2) - (w / 2)) + dualScreenLeft;
      var top = ((height / 2) - (h / 2)) + dualScreenTop;
      window.open(url, 'popUpWindow', 'height=' + h + ',width=' + w + ',left=' + left + ',top=' + top + ',resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
    });
  }
})
//]]></script>
</b:includable>

Ảnh minh họa


Bước 4: Thêm thẻ tag <b:include name='shareMenu'/> vào chỗ nào mà bạn muốn hiển thị có thể trong bài viết hay ngoài trang chủ đều được

Ảnh minh họa

Bước 5: Thêm css trước ]]></b:skin>


.overlay,.dialog {
  height:100vh;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10;
  background-color:#000;
  opacity:0.6;
}
.hidden{
  display:none;
}
.modal-dialog {
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  background:#ffffff;
  box-sizing:border-box;
  color:#757575;
  padding:30px;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:calc(100% - 24px);
  max-width:520px;
  z-index:101;
}
.modal-dialog-buttons {
  margin-top:8px;
}
share-posts .drops,.modal-dialog-buttons button {
  background:transparent;
  border:0;
  outline:none;
  color:#1155cc;
  cursor:pointer;
  text-transform:uppercase;
  font-weight:bold;
}
.modal-dialog-buttons button {
  text-transform:uppercase;
  font-weight:bold;
}
.dd-menu {
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#ffffff;
  display:none;
  z-index:10;
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  max-width:230px;
  width:100%;
  text-align:left;
}
.dd-menu li {
  display:block;
  list-style:none;
  padding:10px 15px;
  cursor:pointer;
}
.dd-menu li a {
  display:block;
  font-size:15px;
  color:#333333;
}
.dd-menu li:hover {
  background-color:rgb(230,230,230);
}
.dd-menu svg {
  margin-right:25px;
  height:24px;
  width:24px;
  vertical-align:middle;
}

Bước 6: Kiểm tra trong mẫu template nếu chưa có link thư viện jquery thì chèn link sau trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Vâng bài viết chỉ đơn giản với 6 bước vậy thôi, các bạn tham khảo thấy hay thì thêm vào Blog của mình. Chấm hết bài!!!
Bài viết này có hữu ích không?
4 Nhận xét
  1. Tạo hộp thoại chia sẻ bài viết chuyên nghiệp cho Blog <3

    Trả lờiXóa
    Trả lời
    1. Sao không có nổi cái hình minh họa luôn vậy bác

      Xóa
    2. Bỏ chặn quảng cáo đi em, nút share nó nằm ngay dưới nút like Facebook đấy

      Xóa