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
» 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:
.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;
}
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>
Đặ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..
Nhận xét
Cái này k cần mã hóa code trước khi đưa vào hả anh Nam?
Trả lờiXóaCó 2 cách cần ãm hóa và không cần mã hóa:
XóaCách 1: Cần mã hóa:
Nếu chèn ở dạng HTML thì phải mã hóa. Em có thẻ dùng công cụ CONVETER
Cách 2: Không cần mã hoa:
Em chèn cú pháp bên dưới vào HTML
<div class="codeview">
Đặt code vào tại đây
</div>
Sau đó bấm vào phần Viết và bôi đen phần Đặt code vào tại đây và pate đè code không cần mã hóa đè lên nha.
Em test thử html thì thấy dc nhưng nếu cái javascrip hình như k đc đúng không anh?
Trả lờiXóaĐược hết em ak. Khung code anh đang dùng cũng thuộc dạng này mà. :))
Xóadạ, cảm ơn anh, để em coi lại thử ^^
XóaUk cứ thử đi em :))
Xóadạo này em chưa có thời gian coi thủ thuật này, nhưng giờ em coi lại thì làm k dc anh, em làm như anh chỉ nhưng khi chèn code vào khung thì nó hiện nguyên lên cái hiệu ứng luôn anh ạ, nó k hiện code. anh coi giúp em với ạ
XóaEm dùng caaos trức sau khi chèn nha:
Xóa<div class="codeview">
Đặt code đã mã hóa vào tại đây
</div>
- Nếu chèn phần HTML thì phải mã hóa code bằng công cụ: Code conveter
dạ, e làm thế rồi nhưng em nghĩ nó bị lỗi gì trong template ấy anh ạ, k làm đc.
XóaEm hãy mời email tavannam01@gmail.com làm cộng tác viên anh sẽ post demo cho.
Xóadạ, vậy anh giúp e tí nhé.
XóaLà đoạn này nha em:
Trả lờiXóapre,code{margin:10px 0;border:3px dotted #9c6;background:#e9e9e9;padding:7px;width:auto!important;width:96%;overflow:auto;font-family:"Courier New",monospace;font-size:14px;color:#666;max-height:250px;}
khi post bài dùng:
<pre>code ở đây</pre>