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

Một khi bạn đã trở thành 1 blogger thực thụ thì việc chia sẻ tới cộng đồng các thủ thuật, tiện ích, đoạn mã script là điều hiển nhiên. Bài viết sau đây sẽ giúp bạn tạo ra 1 khung chứa code có nút copy to clipboard không flash, không frameworks nhẹ nhàng và đầy tính chuyên nghiệp

Trước tiên bạn hãy test cách thức hoạt động của khung code này

Hãy bấm vào nút Copy sau đó mở Notepad và Ctrl V để kiểm tra

 DEMO
OK, thích rồi đúng không, nhờ tích hợp tiện ích copy to clipboard, khách truy cập sẽ có thể dễ dàng copy nội dung bạn muốn chia sẻ trong 1 nốt nhạc mà không cần mất công bôi đen nữa. Để 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, 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ý !

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