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
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>
Chúc bạn thành công!
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 -->Bước 2: Thêm đoạn js bên dưới lên trên thẻ </head>
<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 -->
<script>
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="",t.value=e,document.body.appendChild(t),t.select();try{document.execCommand("copy"),alert("Đã sao chép liên kết!")}catch(o){alert("Không thể sao chép liên kết!")}document.body.removeChild(t)}function CopyLink(){copyTextToClipboard(location.href)}
</script>
Demo tiện ích |