Tạo khung cho code trong bài viết blog

Hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger, đoạn mã hiển thị trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

Cách làm như sau:

- Vào Thiết kế/Chỉnh sửa HTML

- Đặt đoạn code sau vào trước ]]></b:skin> :

pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTCDZhlCAyvi4Ap8PZUaGIQk174IwZ84B5fSA3h4ogzjg7P96xis6pBCu6bl9531roxRjMVU_ECayH8kLu6Lvoof-Mp4cAU-3J7wislg3L3BzRril281aR_AjCdGoRj16HHRIM_5qbiA/s1600/code-khung-bai-viet.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}

- Lưu mẫu

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

<pre>
 ... code ... 
</pre>

Hoặc:

<code>
... code ...
</code>

Link file ảnh code-khung-bai-viet.jpg download ở đây