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:


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

Loading...

12 nhận xét

  1. 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





    Trả lờiXóa
  2. lời biệt ly buồn mấy đến mức tuyệt vọng

    suc khoe

    Trả lờiXóa
  3. nếu buồn ngủ quá thì phả lm sao

    du lịch

    Trả lờiXóa
  4. Đọc báo thấy có rất nhìu thứ đệp mờ bạn eii

    Trả lờiXóa