Tạo khung chứa code nút copy chuyên nghiệp cho blogspot

Bước 1. Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
 

Bước 2. Tích hợp JQuery nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
 

Bước 3. Tiếp theo tích hợp chức năng copy to clipboard, chèn đoạn mã sau trước thẻ đóng </head> và phải bên dưới đoạn JQuery

<script src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){new Clipboard(".copyTextButton")});
//]]></script>
 

[next]

Bước 4.Thêm css để khung code dễ nhìn, dán đoạn mã sau trước thẻ đóng]]></b:skin>

.codeToClipboardHeader{background-color:#fff;border:1px solid #e0e0e0;border-bottom:0;text-align:left;padding:3px}
.copyTextButton{color:#000!important;font-size:18px;padding:4px 10px;border-right:1px solid #e0e0e0;text-decoration:none}
.copyTextButton:before{margin:0 5px 0 0;font-size:16px;content:'\f0c5';font-family:fontawesome}
pre.codeToClipboard{background:#fff;max-height:500px;font-size:14px;color:#000;overflow:auto;border:1px solid #d3d6db;margin:auto;padding:10px 8px}
 

Bước 5. khi viết bài đụng phải đoạn nội dung cần cho vào khung bạn chuyển sang chế độ HTML và dán đoạn code sau vào

<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
</pre>
 

[next]
* Lưu ý:Nếu trong bài viết chứa nhiều khung code bạn cần thay đổi 2 thuộc tính data-clipboard-target và id của thẻ <pre> để tránh copy nhầm nội dung. Khung code 1

><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
</pre>

Thì khung code 2 bạn có thể đổi thành

<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
</pre>

Cập nhật: Từ phiên bản 2.0.0 bạn cần thay phần new Clipboard("...") thành new ClipboardJS("...") để gọi đúng hàm nhé

Sau đây là Demo:

Copy

Viết nội dung code vào đây
Viết nội dung code vào đây
Viết nội dung code vào đây
Viết nội dung code vào đây
Viết nội dung code vào đây

Xem thêm cách chèn khung code có nút download và copy