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

Để 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>