ANHLEVAN.TK hướng dẫn các bạn tạo khung chứa code có nút copy to clipboard.
Việc này rất tiện để chia sẻ code vì chỉ cần một click chuột. Demo ngay tại bài viết này luôn.
Bạn chỉ cần copy code sau và dùng ngay trong bài viết của mình (không can thiệp vào Chủ đề blog)
Bước 1: Copy code sau đưa vào nơi cần hiển thị của bài viết ở chế độ HTML
<div class="codeToClipboardHeader"><a class="copyTextButton" data-clipboard-target="#content1" href="#null" title="Copy to clipboard">☑ Copy</a></div> <pre class="codeToClipboard" id="content1"> Viết nội dung code vào đây lần 1 </pre> <div class="codeToClipboardHeader"><a class="copyTextButton" data-clipboard-target="#content2" href="#null" title="Copy to clipboard">☑ Copy</a></div> <pre class="codeToClipboard" id="content2"> Viết nội dung code vào đây lần 2 </pre>
Bước 2: Copy code sau vào cuối bài viết của bạn, lưu lại và xem kết quả
<style type="text/css">
.codeToClipboardHeader{background-color:#eeefff;border:1px solid #e0e0e0;text-align:left;padding:3px;}
.copyTextButton{color:#000;font-size:16px;padding:6px 10px;border-right:1px solid #e0e0e0;text-decoration:none;}
.copyTextButton:hover{color:red;text-decoration:none !important}
pre.codeToClipboard{background:#FBFBEF;max-height:500px;font-size:14px;color:#000;overflow:auto;border:1px solid #d3d6db;margin:auto;padding:10px 8px}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(function(){new Clipboard(".copyTextButton")});
//]]></script>
CHÚ Ý:
- Ở trên trong Bước 1 mình giới thiệu làm 2 cái trong một bài viết
- Nếu chỉ dùng 1 thì bỏ cái thứ 2, còn thêm nữa thì thêm tương tự phần contentn màu đỏ.
- Nếu trong template đã có jquery.min.js thì bỏ dòng màu xanh trên (thường thì đã có) trong Bước 2.
- Phần code đưa vào trong chế độ soạn thảo HTML thì bạn phải chuyển đổi tại đây!
☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.
Tags:
blogspot