Đặt code trong khung trên bài viết của Blogger

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: #333333; background: #999999; width: 100%; height: 50px; 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ẻ ). 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.

Bạn chép đoạn code vào template như hướng dẫn trên

pre, code {
  display:block;
  font: 1em 'Courier New', Fixed, monospace;
  font-size : 100%;
  color: #666666;
  background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.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;
}

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>

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.
*chú ý:bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành < và > thành >) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.
nguồn(thuthuatblog.com)