Pernah melihat blog yang menggunakan tag pre? Salah satunya adalah blog yang sedang Anda baca ini. Coba perhatikan tag pre -nya, terdapat j...
Pernah melihat blog yang menggunakan tag pre? Salah satunya adalah blog yang sedang Anda baca ini. Coba perhatikan tag pre-nya, terdapat judul dan warna latar berbeda sesuai kode. Bila kode CSS maka warna latar judulnya hijau, HTML warna latar judulnya merah, dst.
Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda yang ingin menggunakan nya, silahkan simpan kode ini di atas
Ini bisa juga diterapkan untuk
Format penulisan dalam artikel seperti contoh di bawah ini.
Selamat belajar :)
Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda 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}
Ini bisa juga diterapkan untuk
blockquote
. Anda hanya perlu mengganti kode CSS dari pre
menjadi blockquote
.Format penulisan dalam artikel 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...
Selamat belajar :)
COMMENTS