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

Đọ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.

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)