Thứ Ba, 23 tháng 7, 2013

Thêm codeview vào bài viết





Thông thường, khi giới thiệu code , chúng ta hay đặt chúng ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn . Vậy phải làm sao để phần giới thiệu ở nền blog chính thức , còn đoạn code ở trong một khung có nền tùy chỉnh ? Chúng ta sẽ biết sau khi đọc xong bài viết sau đây !

Đầ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 15px 15px 15px;
 padding : 10px;
 clear : both;
 list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ZPPBSUEdjFcq5cCYdfmkoQPgzwl-7Jo-wxTRmuG0oHq1C7vFKA0FJl9H-WGO0zmzKKBX7wOYtkcXUNhDAG5bengeEWGVKiG8G6xWkNkGRN-cuYrOhAWCHkBVfW89k0j0ov0hwOhUkA/s1600/codeviewhtshop.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; }




Vậy là các bạn đã tạo xong thuộc tính đặt code trong một khung độc đáo rồi đấy . 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">
Điền code vào đây
</div>


st internet

0 nhận xét:

Đăng nhận xét