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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2L6iqMhIlxQYeWYlwgnOyRgdCQJ6RgjZfFr6F67YO9_qNPR2Eoz4ikbT1FEQYJi2WdpaeLWvf5M9Po1-RjSFQM1JzRtpNbgtI5Kc6s8n0fEzx84HKc6HlxI3z7B7HebaMufJiiGt0xAa/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>