• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo nét riêng khi trình bày code CSS, Javascript và HTML

2
16/12/2010

Nếu blogspot của bạn giới thiệu về thủ thuật blog hay thiết kế web thì sẽ thường xuyên trình bày code trong bài viết.. Những code có cường độ trình bày nhiều nhất là CSS, Javascript và HTML. Tạo nét riêng khi trình bày những code này là một cách tạo sự khác biệt cho blog của bạn.

Bài viết này giới thiệu kiểu trình bày code trong bài viết Blogger với nét riêng biệt cho từng code CSS, Javascript và HTML.

Bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.


pre {padding-top:20px;}
pre code {
overflow:auto;
background: transparent url(http://img560.imageshack.us/img560/9986/fondocoments2.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://img59.imageshack.us/img59/7421/cssya.png) no-repeat scroll left top;}
pre.js {background:#FFFFFF url(http://4.bp.blogspot.com/_q4j3j-JA2ro/Sy2Lryi4DaI/AAAAAAAAM78/2dSD_M5WqG8/s1600/js.png) no-repeat scroll left top;}
pre.html {background:#FFFFFF url(http://img189.imageshack.us/img189/667/htmlh.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.

Bước 2. 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="css"><code>
… Đặt code CSS tại đây …
</code></pre>


<pre class="js"><code>
… Đặt code Javascript đã được mã hóa tại đây …
</code></pre>


<pre class="html"><code>
… Đặt code HTML đã được mã hóa tại đây …
</code></pre>

{2 bình luậnAdd yours ?}

Yolks
AUTHOR
10:56:00, 10 thg 9, 2011

Woa cái này ngon

Reply
12:38:00, 17 thg 1, 2012

:3) Hay thật :1)

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn