Đọ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.
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.
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!
Thực hiện CSS để làm đẹp khung
Bước 1: Vào quản trị Blogger > Chủ đề > Chỉnh sửa HTMLBướ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)
![]() |
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.
![]() |
Chọn biểu tượng đóng khung và Xuất bản bài viết |