Tiện ích copy link bài viết cho blogspot

Chia sẻ:

3.7.19 | 0 nhận xét | lượt xem

Bài viết hướng dẫn bạn thêm tiện ích copy link bài viết vào mỗi bài viết để độc giả tiện chia sẻ hơn. Click vào đây để xem demo
Tiện ích tự lấy link bài viết qua thẻ 'data:post.url' và có thông báo đã copy sau khi click vào như hình bên dưới

Ngay bây giờ chúng ta cùng thực hiện

Chèn tiện ích vào bài viết

Chèn đoạn code bên dưới vào nơi muốn hiển thị trong bài viết

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='copylink left'>
    <div class="tooltip">
        <div onclick="myFunction()" onmouseout="outFunc()">
            <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
            <svg class="fa-links left" viewBox="0 0 512 512">
                <path class="" d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" fill="currentColor"></path>
            </svg>
            <div class='linktext left'>
                <input type="text" expr:value='data:post.url' id="linkpost" />
            </div>
        </div>
    </div>
</div>
<div class='clear' />
</b:if>

Giao diện cho tiện ích

Sử dụng style bên dưới cho tiện ích, hãy tùy chỉnh cho phù hợp với blog của mình

<style>
.left{float:left}
.tooltip{position:relative;width:100%;height:20px}
.tooltip .tooltiptext{visibility:hidden;width:auto;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:5px;position:absolute;z-index:1;bottom:150%;left:50%;margin-left:-75px;opacity:0;transition:opacity .3s}
.tooltip .tooltiptext::after{content:"";position:absolute;top:100%;left:50px;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1}
.copylink{border:1px dashed rgb(171,171,171)!important;background:#f0f0f0;border-radius:5px;padding:5px 0 5px 10px;width:99%;cursor:pointer}
.copylink .fa-links{width:15px;margin-right:10px;margin-top:2px}
#linkpost{border:0;background:transparent;overflow:hidden;text-overflow:ellipsis;width:100%;font-size:15px;cursor:pointer}
.linktext{width:calc(100% - 25px)}
</style>

Javasript để tiện ích hoạt động

Chèn đoạn code bên dưới trước thẻ đóng </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
function myFunction() {
    var copyText = document.getElementById("linkpost");
    copyText.select();
    document.execCommand("copy");

    var tooltip = document.getElementById("myTooltip");
    tooltip.innerHTML = "Đã Copy: " + copyText.value;
}

function outFunc() {
    var tooltip = document.getElementById("myTooltip");
    tooltip.innerHTML = "Copy Link";
}
</script>
</b:if>

Cảm ơn đã theo dõi ./.