Membuat Judul Pada Tag Pre

Unknown
Minggu, September 13, 2015
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 ]]>
 atau 

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 daripre menjadi blockquote.

Untuk penulisan, tambahkan data-codetype="JenisKode". Baca Juga Mengenal Pre Tag HTML