Tạo tiêu đề từng loại cho thẻ Pre trong Blogspot

7.4.19 | 0 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    Để thuận tiện hơn trong việc chia sẻ code đến độc giả khi hướng dẫn, chúng ta nên phân loại chúng ra để mọi người không nhầm lẫn

    Hướng dẫn

    Thêm đoạn CSS sau vào trước thẻ ]]></b:skin> trong template
    pre[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Arial,Sans-serif;font-size:14px;text-transform:uppercase;background-color:#41749f;color:white}
    pre[data-codetype="CSS"]:before{background-color:#5fbbba}
    pre[data-codetype="HTML"]:before{background-color:#4fc1eb}
    pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
    pre[data-codetype="JQuery"]:before{background-color:#99c262}

    Thực hiện khi viết bài

    Viết bài với chế độ soạn thảo HTML. Mặc định bạn sử dụng thẻ <pre>  như bình thường. Nhưng nếu muốn thêm các tựa đề cho đoạn code bạn viết theo cấu trúc sau:
    <pre data-codetype="CSS">Code CSS</pre>
    <pre data-codetype="HTML">Code HTML</pre>
    <pre data-codetype="JavaScript">Code JavaScript</pre>
    <pre data-codetype="JQuery">Code JQuery</pre>
    Bạn đang xem bài viết "Tạo tiêu đề từng loại cho thẻ Pre trong Blogspot" tại chuyên mục: Blogspot , CSS

      Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

      Chèn code: [pre]Code đã mã hóa [/pre]

      Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

      Chèn link: Click để chèn link