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

0 Share Share Share Send by Email Copy URL

Để làm được điều đó thì bạn cần các công cụ sau

• Fontawesome để cho nút copy thêm sinh động
• JQuery: cái này thì hầu hết template đều phải có
• Tiện ích copy to clipboard

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

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ý !

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é

Như vậy, qua bài viết bạn đã có cho mình 1 khung chứa code đẹp và chuyên nghiệp rồi đó. Chúc bạn thành công