Tạo khung chứa code kèm nút copy cho blogger

Mở đầu

Khung code là thành phần quan trọng và không thể thiếu đối với những blog viết về thủ thuật có bài viết dài thường sử dụng các đoạn script hay chỉ đơn giản bạn muốn một nội dung nào đó nằm trong khung cho gọn.
Điều đặc biệt trong khung chứa code này có thêm cả nút copy nữa rất thuận tiện.

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>


<!-- The frame contains the code By Xuan Trung Pro -->
.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 JS sau trước thẻ </body>


<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/2vwAlag"></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


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

Lưu ý vào Blog của mình chọn Tools sau đó Mã hóa code rồi mới đưa code vào blog được nha ^^

Lời kết

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.

Related Posts
Rate this post

XTT

Subscribe to my Youtube channel