Tạo tiện ích copy link bài viết cho blogspot

Đăng Ngày: tháng 8 12, 2018

Đăng Bởi: Nguyễn Đình Diện

Chào các bạn hôm nay mình sẽ hướng dẫn các bạn tạo tiện ích copy link bài viết cho blogspot

Hướng dẫn cách làm

Để tạo tiện ích này, làm những yêu cầu sau:
Bước 1: Vào chỉnh sửa HTML và chèn toàn bộ đoạn Code bên dưới lên trên thẻ đóng </body>

<!-- Copy link -->
<style>
.at-button{z-index:10000000;position:fixed;right:24px;bottom:24px;background:#FFF;width:48px;height:48px;padding:12px;border-radius:100%;box-sizing:border-box;color:#666;-webkit-animation:at-ripple .6s linear infinite;animation:at-ripple .6s linear infinite}
.at-button:hover i{-webkit-transform:rotate(135deg);transform:rotate(135deg)}
.at-button i{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transition:.3s ease}
@-webkit-keyframes at-ripple {
0%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}
@keyframes at-ripple {
0%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 0 rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1)}
100%{box-shadow:0 4px 10px rgba(102,102,102,0.1),0 0 0 5px rgba(102,102,102,0.1),0 0 0 10px rgba(102,102,102,0.1),0 0 0 20px rgba(102,102,102,0)}
}
</style>
<a class='at-button' href='javascript:;' onclick='CopyLink()'><i class='material-icons'>link</i></a>
<!-- End -->

Bước 2: Thêm đoạn js bên dưới lên trên thẻ </head>

<script>
function copyTextToClipboard(e){var t=document.createElement(&quot;textarea&quot;);t.style.position=&quot;fixed&quot;,t.style.top=0,t.style.left=0,t.style.width=&quot;2em&quot;,t.style.height=&quot;2em&quot;,t.style.padding=0,t.style.border=&quot;none&quot;,t.style.outline=&quot;none&quot;,t.style.boxShadow=&quot;none&quot;,t.style.background=&quot;&quot;,t.value=e,document.body.appendChild(t),t.select();try{document.execCommand(&quot;copy&quot;),alert(&quot;Đã sao chép liên kết!&quot;)}catch(o){alert(&quot;Không thể sao chép liên kết!&quot;)}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}
</script>

Demo tiện ích

Chúc bạn thành công!