Facebook Activity Feed

Thứ Sáu, 15 tháng 4, 2011

Đặt code trong khung trên bài viết của Blogger

| | 0 nhận xét
+Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ ]]<>/b:skin>
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.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;
}
+Từ giờ , bạn có thể thêm code vào bất cứ đâu trên bài viết với thẻ sau

<div class="codeview"> 
Dán code đã mã hóa vào đây
</div>
Một kiểu khác
+Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ ]]<>/b:skin>

pre {padding-top:20px;}
pre code {
overflow:auto;
background: transparent url(http://dl.dropbox.com/u/4114371/AnhienlamBlog/2.png) repeat;
border: 1px solid rgb(204, 204, 204);
color:#7f7f7f;
font-size:12px;
display:block;
max-height:350px; min-height:45px;width:580px;
padding:5px; white-space:pre;
text-align:left;}
code:hover {background-color:#ffffff;}
pre.css {background:#FFFFFF url(http://dl.dropbox.com/u/4114371/AnhienlamBlog/1.png) no-repeat scroll left top;}
pre.js {background:#FFFFFF url(http://dl.dropbox.com/u/4114371/AnhienlamBlog/3.png) no-repeat scroll left top;}
pre.html {background:#FFFFFF url(http://dl.dropbox.com/u/4114371/AnhienlamBlog/4.png) no-repeat scroll left top;}
Chú ý: trong đoạn code trên, max-height gán chiều cao tối đa cho khung trình bày code, nếu vượt qua mức này thì sẽ tự động hiển thị thanh cuộn scrollbar. Bạn có thể thay đổi chiều rộng khung ở dòng width:580px.
Lưu Template.
+Mỗi khi viết bài, ở chế độ Edit HTML, khi bạn muốn trình bày code thì định dạng cấu trúc HTML như sau:

<pre class="html"><code>
… Đặt code HTML đã mã hóa vào đây …
</code></pre>

Không có nhận xét nào:

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | ↑ back to top
Ghi rõ nguồn namkna.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. lamvananh - All Rights Reserved
Design by Namkna
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million namkna template bynamkna