Tạo Code Box đẹp với hiệu ứng hover cho blog

Điểm 4.6/5 dựa vào 87 đánh giá

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:

LIVE DEMO

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ản quyền bài viết - Tác giả: KJ Magic - Kelvin Trinh

Chuyên mục: Blogspot nâng cao Blogspot tips Recent Posts