Tạo khung chứa code cho bài viết cách 5

Bạn viết blog thường có kèm theo code HTML để giới thiệu. Bạn muốn bài đăng của mình được đẹp hơn trong mắt người đọc.

Lần trước mình đã giới thiệu (Xem ở đây). Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.

Bài viết này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.  Xem ảnh Demo

Vậy thì hôm nay tôi xin hướng các bạn cách làm đó. Hãy làm theo các bước sau:
B1: Login vào bảng điều khiển -> Thiết kế -> Sửa HTML.
B2: Nhấn CTRL + F để tìm dòng sau: ]]></b:skin> , sau đó hãy thêm đoạn code dưới ngay trên dòng vừa tìm được.

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DjzuaFQB2rW6Up_fanPYyeTFko5SvKrx2GrzC9euzROb_R1BFE6x4YKnMdYCk-7uQS9-bKRDt7wsdUDjnajMZbVQhREM790oHbwcJ-33kwP4WfLs9RN4E9Wf8ENMxqPOwBET3zCuKsQ/s1600/khung-chua-code-namkna-blogspot-com.jpg) 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;
}

Vậy là bạn đã chỉnh sửa HTML thành công rồi ! Bây giờ khi viết bài đăng, hãy dùng code sau chèn vào bài viết và dán code cần hiển thị vào giữa.

<div class="codeview">
Đặt code vào tại đây
</div>

Các bạn tải hình này về và upload lên blog sau đó thay vào link của bạn nha. có thể thay bằng hình khác.
Chúc thành công!

Chủ đề:
Blogspot box code, Blogspot-tips