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

Chèn khung chứa code vào Blogspot là việc làm khó khăn cho những người mới làm Blogger.

Sau đây mình sẽ hướng dẫn chi tiết cách chèn khung code:

Bước 1: Đăng nhập Blogger => Chủ đề => Chọn chỉnh sửa HTML

Bước 2: Tìm kiếm từ khóa ]]></b:skin> 

Bước 3: Dán đoạn code CSS sau ngay phía trên thẻ ]]></b:skin>

#css (trước ]]></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;
}

B4:

#css (trước </b:skin>)

Copy

<script src="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/2vwAlag"></script>
<script>
$(function(){
new Clipboard('.copy-text');
});
</script>

B5: Giờ bạn có thể quay lại soạn bài đăng vào chế độ HTML. Để thêm 1 khung chứa code bạn chỉ cần làm làm như sau:

#html

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>

LƯU Ý: code chèn vào nếu chứa các ký tự đặc biệt là mã html thì cần được encode trước khi đưa vào. Để mã hóa các bạn truy cập link: https://mothereff.in/html-entities

Copy dán vào giữa 2 thẻ thế là xong. 

Chúc các bạn Thành công! Nếu thấy hữu ích, hãy like và share ! Thanks you.