Cách Tạo Khung Viết Code Cho Blogspot Tuyệt Đẹp

Khung viết code là gì - nó chỉ là khung để đánh dấu và làm nổi bật đoạn code mà các bạn muốn giới thiệu đến người đọc, không những thế nó còn giúp bài viết rõ ràng hơn, dễ nhìn hơn và chuyên nghiệp hơn.

Bài viết ngày hôm nay sẽ hướng dẫn các bạn tạo khung viết code một cách đơn giản nhất và chi tiết nhất để chắc chắn rằng đối với người không chuyên cũng sẽ hiểu được. Và đây cũng là khung mà mình đang dùng cho blog của mình.

Nào cùng bắt đầu nhá!

Khung sẽ có dạng như sau:

Cách Thực Hiện

1. Đầu tiên các bạn truy cập vào trang chỉnh sửa blog, vào mẫu ==> chỉnh sửa HTML

2. Bạn gõ ctrl + F để mở hộp tìm kiếm và tìm đến thẻ sau: ]]></b:skin>

3. Thêm đoạn code dưới đây vào trước thẻ đó.

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfOPZ2JZ_YUXJ3PUsSCMyOTfSyl3ktmAIJwm1wmB8Olaf-dR6xbRs2TVmZZld6ZOSQCaUoXE1UaroRdmP6l5uxFbQ90AzOwpf5S_DFf-fbQMH1n3ByHNGxFheJXmyQLrhok2RwmW2CGw_/s1600/box-code-6.png) 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;
}

4. Lưu template lại.

5. Cách thêm khung vào lúc viết bài:

5.1Các bạn vào bài mới ==> chuyển qua tab HTML thêm đoạn code này vào:(xem hình)

5.2 Xong rồi các bạn chuyển qua tab Viết, sẽ xuất hiện dòng chữ "Đặt code vào tại đây", bạn chỉ cần bôi đen dòng chữ đó và dán đè đoạn code lên là được .