Đọc tiêu đề bài viết thì bạn đã biết rõ thủ thuật này là gì rồi. Themix sẽ hướng dẫn các bạn cách tạo khung chứa code cho blogger/blogspot bằng CSS. Vừa đơn giản, vừa đẹp mắt mà lại không gây ảnh hưởng gì đến tốc độ tải trang của Blog bạn.

Cách làm khung chứa code đơn giản cho Blogger

Thực hiện CSS để làm đẹp khung

Bước 1: Vào quản trị Blogger > Chủ đề > Chỉnh sửa HTML
Bước 2: Chèn đoạn code CSS sau vào trên thẻ ]]></b:skin> 
blockquote{
margin:10px 0!important;
border:2px solid #58257b!important;
overflow: auto !important;
text-align: left !important;
max-height: 250px !important;
background: #ddd!important;
background-repeat: no-repeat !important;
padding: 15px 20px 15px 35px !important;
color: #555 !important;
user-select:all}
Bước 3: Lưu template lại và tiến hành cách sử dụng như phía dưới đây:

Cách sử dụng khung chứa code

Đầu tiên các bạn coppy đoạn code mình cần đóng khung dán vào bài viết (lời khuyên cho các bạn là nên coppy đoạn code bỏ vào Notepad, sau đó coppy từ notepad dán lên bài viết để không bị lỗi font chữ hay bố cục khi coppy từ ngoài vào)

Tiếp đến, chọn tô xanh đoạn code cần đóng khung (như hình)
Cách làm khung chứa code đơn giản cho Blogger
Tô xanh phần cần đóng khung

Cuối cùng, chọn biểu tượng trích dẫn trong giao diện viết bài của blogger để hoàn thành việc đóng khung code.
Cách làm khung chứa code đơn giản cho Blogger
Chọn biểu tượng đóng khung và Xuất bản bài viết

Xuất bản bài viết và xem kết quả đã thực hiện. Chúc các bạn thành công!