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 Đặt code trong khung trên bài viết của Blogger (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
Tạo khung chứa code cho bài viết cách 5 - http://namkna.blogspot.com/

» Cách thêm khung chứa code cho blogspot/

1- Đăng nhập vào Blog
2- Vào mẫu (template)
3- Chọn chỉnh sửa HTML (EditHTML).
4-  Nhấn CTRL + F để tìm dòng </b:skin> hoặc ]]></b:skin> như hình dưới:
Cách dán CSS vàoblogspot
5- Thêm đoạn code dưới ngay trên dòng ]]></b:skin> 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/AVvXsEgZG78cgOrU6dxv90J66KCcIOeNOLp9RqSruiTDLp6wimMgsonMsWXDIFg3DZwXzJ3cU15M5rVaeD7y9v6or3cZ2_8SBPkg1IbrzNFWWRkrs_Y8jQBTbYnPPuysl3UjFpPOtvQ4aOayo-4c/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;
}
6- Lưu mẫu lại.
- Vậy là bạn đã chỉnh sửa HTML thành công rồi ! Ta sẽ làm bước tiếp theo.

» Cách sử dungjkhi chèn code!

- 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>
-Lưu ý code đưa vào bài viết phải mã hóa. Hãy sử dụng công cụ sau của Namkna: Code conveter

» Một số link ảnh khác cho các bạn!

Các bạn có thể thay hình ảnh ở bước 5 thành hình ảnh của bạn.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..