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

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.

Ảnh minh họa

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!!!

Subscribe
Thông báo
guest
4 Comments
Lâu đời nhất
Mới nhất
Inline Feedbacks
View all comments
Việt Blogger
21/09/2018 1:18 Chiều

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

Huỳnh Phụng Blogger
21/09/2018 12:55 Chiều

Sao không có nổi cái hình minh họa luôn vậy bác

Nguyễn Tuấn
06/09/2018 4:28 Chiều

(y)

Nguyễn Tuấn
06/09/2018 4:14 Chiều

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

Scroll to top
4
0
Would love your thoughts, please comment.x
()
x
0923.081.111