Tạo khung chứa code có nút copy to clipboard cho blogspot

 Trước tiên như thường lệ bạn đăng nhập vào trang quản trị của mình, vào mục chỉnh sửa HTML

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

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

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>

Bạn có thể upload đoạn script trên về host của mình để khỏi phụ thuộc vào host khác.

Thêm css để khung code dễ nhìn, dán đoạn mã sau trước thẻ ]]></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}

Như vậy bạn đã tích hợp thành công khung chứa code có button copy to clipboard tiện lợi. Sau này 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>

Thẻ pre sẽ giữ nguyên dạng đoạn mã của bạn, tuy nhiên nếu nội dung code là đoạn mã HTML, CSS, Javascript bạn cần convert trước khi đặt nó vào để tránh xung đột với code template đang dùng. Sử dụng tiện ích HTML Converter tại đây nhé

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

Ví dụ

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>

Thì sẽ copy đúng nội dung mà nó quản lý !