Tạo khung độc đáo chứa code trong Blogspot

Thông thường khi giới thiệu code của một bài viết chia sẻ thủ thuật nào đó, chúng ta hay đặt code ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn và khó phân biệt.

Vậy phải làm sao để phần giới thiệu ở nền blog chính, còn đoạn code ở trong một khung có nền tùy chỉnh ? Vấn đề này có thể áp dụng thủ thuật Blockquote, tuy nhiên còn một cách khác mà bạn sẽ biết sau khi đọc xong bài viết này!

Demo chính là khung chứa code bên dưới đó.

Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab chỉnh sửa HTML mà không cần bật mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ ]]></b:skin>

.codeview {height:300px;overflow:auto; margin : 15px 0; padding : 20px; list-style-type : none; background : #f9f9f9 url(https://3.bp.blogspot.com/-MMsyju76blA/WWZftYdn0XI/AAAAAAAADM0/sMcVPbXfn28VvU6RJxmpo8UtPBVFL9zuwCLcBGAs/s1600/framecode.gif) no-repeat right bottom; border-top : 1px solid #008080; border-right : 2px solid #008080; border-bottom : 2px solid #008080; border-left : 1px solid #008080; font-size : 15px; line-height : 24px;font-family:"Consolas", "Courier New", Courier, mono, serif; color : #333333; font-weight : normal} 

Ghi chú: Bạn có thể thay đổi màu Nền,Chữ và  Border theo ý mình(phần bôi đỏ) Vậy là các bạn đã tạo xong thuộc tính đặt code trong một khung độc đáo rồi đấy . Từ giờ , bạn có thể thêm code vào bất cứ đâu trên bài viết với thẻ sau:

<div class="codeview">
Điền code vào đây</div>