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


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

Xem khác cùng chủ đề

9 nhận xét | Viết lời bình

7/24/2015 02:08:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





10/07/2016 06:46:00 SA Trả lời

lời biệt ly buồn mấy đến mức tuyệt vọng

suc khoe

10/25/2016 04:10:00 CH Trả lời

Đọc báo xong thích bắt tay ngay vào làm

10/27/2016 07:57:00 SA Trả lời

thật k cậy, lm hoài r

du lịch

11/23/2016 09:44:00 SA Trả lời

nếu buồn ngủ quá thì phả lm sao

du lịch

12/06/2016 03:15:00 CH Trả lời

Đọc báo thấy có rất nhìu thứ đệp mờ bạn eii

12/11/2016 01:50:00 CH Trả lời

Giảm cân đối với mình là thành công r

1/13/2017 12:56:00 SA Trả lời
Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang