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

Tài liệu
Tạo tiện ích copy link bài viết cho blogspot 2018
Chuyên mục
Người đăng
Đăng vào
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 các bạn thành công !    
   
                                                                                       Nguồn: https://www.toishare.net/

Hiện có bình luận