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. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

CSS điều khiển thuộc tính khung hiện code:
Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng</pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style="color: #00ff99; background: #cccccc; width: 100%; height: 200px; overflow: auto; padding: 10px;">.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin>code<![CDATA[/* và ]]>code</b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi.




Ví dụ có CSS như sau:

 .pre-formatting{
  color: #0099ff;
  background: #cccccc;
  border: 1px solid #0099ff;
  height: 200; width: 100%;
  overflow: auto;
  font-family: "Tahoma", Tahoma;
  padding: 10px;
}

Bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính như cao, rộng, nền, chữ,...và khi viết bài ở dạng Chỉnh sửa HTML cho dạng hiển thị này, bạn sẽ đặt code như sau: (độ cao bạn có thể tùy chỉnh)
< pre class="pre-formatting" style="height: 200px;">Code hoặc nội dung.... </pre>
Và kết quả như bên dưới:

Code hoặc nội dung.... 

Lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML trong Settings (Cài đặt) | Formatting (Đang định dạng), trước khi đặt giữa hai thẻ trên. Và hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) để không cần phải gõ mỗi lần dùng. Chúc thành công!