Tạo khung chứa Code trong bài đăng

Đa phần các tiện ích dùng cho Blog đều sử dụng các mã code đặc thù riêng của nó, các mã code này đa số đều phức tạp và dài dòng, do đó nếu bạn thường xuyên chia sẻ các mã code này trên blog thì bạn nên gom nó vào khung chứa code riêng cách biệt với chữ viết trong bài đăng để cho thao tác copy của khách tham quan được thuận tiện hơn và ít nhầm lẫn hơn.

Bạn vẫn đăng bài như bình thường, đến đoạn nào bạn muốn chèn khung chứa code vào thì bạn bấm Enter để xuống dòng, sau đó bấm vào thẻ "chỉnh sửa HTML" trên góc phải của trang đăng bài để chuyển qua mã HTML.

 Sau đó bạn dán tất cả các code này vào phía dưới chữ </div>

<div style="border-right: gray 1px solid; padding-right: 4px; padding-left: 4px; font-size: 8pt; border-top: gray 1px solid; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
  <pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">nội dung bạn muốn nhập</pre>
</div>

Sau khi dán tất cả các code trên vào phía dưới chữ </div>, bạn bấm lại vào thẻ "Viết" trên góc phải của trang đăng bài để quay lại bài viết như bình thường, bây giờ bạn sẽ thấy 1 ô nhỏ có chữ "nội dung bạn muốn nhập" trong một khung nhỏ, đến đây bạn có thể gõ các code mình muốn hiển thị vào ô nhỏ này là xong.
Bạn cũng có thể tạo khung với màu nền khác: màu nền xanh, màu nền đen

Chúc các bạn thành công.

Nguồn dunghennessy.blogspot.com