![Membuat Judul Pada Tag Pre Membuat Judul Pada Tag Pre](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJNCVs74o6p4OyqtuDUzdbkgOb9zsuj6ILRA5P45cRFXmTGcRAamxzGGI6s46fkiKr29jW9hmW5Zb33vsnFliuhRJXQ0uXgQmQDmS3OHqRuZf7BqmS5PKzQXiTxJ1zb1umEvBjeagI9Vw/s1600/code-icon.jpg)
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 daripre
menjadi blockquote
.Untuk penulisan, tambahkan
data-codetype="JenisKode"
seperti contoh di bawah ini
Tidak ada komentar:
Posting Komentar