Cara Membuat Judul Pada Tag Pre

Cara Membuat Judul Pada Tag Pre - Halo, apa kabar sobat blogger? Pada kesempatan kali ini saya ingin berbagi sedikit tips mengenai Cara Membuat Judul Pada Tag Pre.

Tutorial kali ini dibuat guna melengkapi tutorial sebelumnya tentang Cara Membuat PRISM SyntaxHighlighter di Blogger. Mengingat jika tutorial tersebut belum memilik title atau judul yang menjelaskan isi kode yang akan diposting.

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

Nah, itulah yang akan kita buat kali ini. 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 */ 

Semoga bermanfaat..