Bài viết này mình tiếp tục chia sẻ một style Code Box (khung chứa code) dành cho website/blog do chính mình code. Code Box này khá đẹp mắt với hiệu ứng hover "chiếu sáng" bằng CSS, hoàn toàn không ảnh hưởng tới tốc độ load trang. Sau đây là các bước tạo Code Box:


Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:
/* Code Box by kjmagic.blogspot.com */
pre,code{margin:15px;padding:10px;background:#ddd;color:#444;border-left:4px solid #333;border-right:4px solid #333;font:13px monospace;overflow:auto;display:block;max-height:300px}
pre:hover{background:#eee}
code:hover{background:#eee}

Bước 2: Sử dụng:
- Để hiển thị code box trong bài viết, các bạn chuyển qua chế độ soạn HTML và chèn vào 1 trong 2 đoạn code sau:
<pre>Code đã được mã hóa</pre>
hoặc
<code>Code đã được mã hóa</code>

Chúc các bạn thành công !
BÀI VIẾT LIÊN QUAN

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công