Ở bài viết trước mình đã chia sẻ với các bạn cách tạo Code Box (khung chứa code) với hiệu ứng hover "chiếu sáng" đẹp mắt cho blog. Bài viết này mình tiếp tục chia sẻ một style Code Box nữa của mình. Các bạn có thể xem demo và cách thực hiện bên dưới.


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:#ffcc99;color:#444;border-right:4px solid #006600;font:13px monospace;overflow:auto;display:block;max-height:300px}
pre:hover{background:#ffff99}
code:hover{background:#ffff99}

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