Hướng dẫn tạo khung chứa code kèm nút copy vào bài viết

Hướng dẫn

Bước 1: Đăng nhập vào Blogger

Bước 2: Vào phần chủ đề ➤ chỉnh sửa html

Bước 3: Sau đó sao chép toàn bộ CSS dưới đây dán vào phía trên thẻ ]]></b:skin>

Copy

.codeHeader {


background-color: #f5f5f5;


border: 1px solid #e0e0e0;


border-bottom: 0;


text-align: right;


padding: 2px;


}


.copy-text {


font-size: 14px;


cursor: pointer;


color: #707070;


padding: 7px 10px;


border-left: 1px solid #e0e0e0;


}


.copy-text:hover {color:#707070;}


pre.code {


display: block;


background: #f9f9f9;


max-height: 400px;


font-size: 14px;


color: black;


text-align: left;


overflow: auto;


border: 1px solid #d3d6db;


margin: auto;


padding: 16px;


line-height: 21px;


white-space: nowrap;


}

Bước 4: Chèn đoạn Javascript sau trước thẻ </body>

Copy

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdn.jsdelivr.net/gh/blogthuthuatwin10/jquery@master/clipboard.js"></script>


<script>


$(function(){


new Clipboard('.copy-text');


});


</script>

Sử dụng

Chèn đoạn HTML sau bạn muốn ở bất cứ đâu trong bài viết:

Copy

<div class="codeHeader">


<a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a>


</div>


<pre class="code" id="p1">


Nội dụng nằm trong khung


</pre>