Cách tạo khung chứa code gọn gàng đẹp mắt cho blogger

Thỉnh thoàng bạn muốn chia sẽ những thủ thuật hay có kèm theo những đoạn code dài trông rất lộn xộn. Hay đơn giản bạn không thích kiểu khung chứa code cũ rông rất màu mè và khó nhìn

Ví dụ mình có mẫu khung chứa code sau, tuy nhiên nó trông cực kỳ khó nhìn

Đoạn chứa code quá mờ không nhìn thấy rõ được

Ở bài này mình sẽ hướng dẫn các bạn tạo một khung chứa code gọn gàng mà chẳng phải cần chèn bất cứ một đoạn code hay script nào vào  theme hết nhé



Cách làm như sau: mình sẽ chia sẽ hai kiểu khác nhau

Kiểu số 1

-1.Khi soạn thảo các bạn vẫn cứ chia sẽ đoạn code như bình thường

2-Chuyển sang chế độ soạn html để bổ sung thêm đoạn code như bên dưới

<div style="background-color: #f4f4f4; border-color: gray; border-style: solid; border-width: 1px; cursor: text; font-family: consolas,'Courier New',courier,monospace; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;">
<span style="font-size: small;">
Nội dung code bạn muốn chèn vô khung
</span>
<span style="font-size: small;"><br /></span>
<span style="font-size: small;"></span></div>
<span style="font-size: small;"><span style="font-family: &quot;times&quot; , &quot;times new roman&quot; , serif;">
</span></span>

3-Lưu lại và tận hưởng thành quả vừa làm xong nhé

Demo cho các bạn xem : tạo table content đẹp cho blogger

Kiểu số 2

Các bước khác bạn làm gióng như bước số 1 chỉ có điều dòng code cũng như kiểu style hơi khác một chút

Code cho kiểu số 2 này các bạn xem ở bên dưới:

<pre style="background: rgb(245, 245, 245); border-radius: 3px; border: 0px; font-family: monospace, monospace; font-size: 15px; font-stretch: inherit; line-height: 1.4; margin: 20px; outline: 0px; overflow: auto; padding: 20px; position: relative; vertical-align: baseline; white-space: pre-wrap; width: auto; word-break: normal; word-wrap: break-word;"><span style="color: #000;"><span style="color: #000;">

Nội dung code mà bạn muốn chèn vào

</span></pre>

Demo kiểu code này :  chèn link auto cho key-word cho blogspot