Tạo khung nhúng code vào bài viết

Demo

Bước 1: Mở trình chỉnh sửa HTML
Bước 2: Ctrl + F tìm đoạn code sau: ]]></b:skin>
Bước 3: Chèn đoạn code sau trước thẻ ]]></b:skin>

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8f7d9jAMVmsKJAQmKnmB_FmPVk-oeCl0JXAYButxeyAwol3SV77CAc77mkfyyLEmTwh7zA-pzXiuNK1ydK4NoMwy45saf20hi9Tcd5jO8tXwE8SXcGWXRPAETOLs3ykAG4pzWRvi1l-Nj/s1600/site4it_framecodeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Ghi chú: Bạn có thể thay đổi phần chữ màu vàng theo ý thích.
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(nhớ chuyển qua chế độ soạn thảo html nhé ^^!) trên bài viết với thẻ sau:

Chú thích thêm: Bạn sẽ hỏi tôi cái link hình ảnh hiển thị đâu. Với blog tôi, tôi k thích màu mè nên đã để phần Background : none, nên k có hiển thị link hình. Và ngược lại, nếu bạn muốn nó hiện thị cho đẹp mắt hơn thì cứ để code như vậy cũng là ok rồi.

Bài viết này tôi tìm hiểu và vọc của http://site4it.blogspot.com. Bạn quan tâm cứ click vào link để tìm hiểu thêm.