Membuat Judul Pada Tag Pre

Membuat Judul Pada Tag Pre - Mungkin sobat pernah melihat beberapa blog yang menggunakan tag pre, mempunyai judul dan warna berbeda sesuai kode, baik CSS, HTML, XML, JavaScrip, JQuery dll.

Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi sobat yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </style>

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}

Bagi sobat yang menggunakan tag blockquote apabila ingin menggunakan cara ini, tinggal mengganti CSS diatas dari pre menjadi blockquote.

Untuk penulisan, tambahkan data-codetype="JenisKode" seperti contoh di bawah ini

<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
dst...