Membuat Judul pada Tag Pre Code

Kembali lagi dengan tutorial yang berkaitan dengan Tag PRE untuk blog-blog jenis tutorial, kali ini saya akan membagikan cara untuk membuat Judul pada Tag Pre. Selain memberikan warna pada isi tulisan (kode) dalam Tag Pre, memberikan judul diatasnya akan menjadikannya lebih terlihat menarik dan lebih profesional. Tidak hanya penambahan nama judul, dalam tutorial ini juga akan dibagikan cara mengganti warna background pada judul tersebut berwarna secara otomatis sesuai dengan judul tag pre-nya. Untuk demonya, silahkan lihat di blog Desain Kode ini.

Membuat Judul/Nama Kode pada Tag Pre

Berikut ini Langkah-langkah penerapannya :
1. Buka menu Template Edit HTML

2. Simpan kode Berikut diatas kode ]]><b:skin>

/* JUDUL TAG PRE */
pre[codetype]:before {
content: attr(codetype);
display: block;
margin-top: 5px;
margin-bottom: -5px;
padding: 7px 15px;
font-family: georgia,Sans-serif;
font-size: 13px;
text-transform: uppercase;
color: #E2E2E2;
}
pre[codetype="CSS"]:before{background-color:#c0392b}
pre[codetype="CSS"] code{border-left: 5px solid #c0392b;}
pre[codetype="HTML"]:before{background-color:#d35400}
pre[codetype="HTML"] code{border-left: 5px solid #d35400;}
pre[codetype="JavaScript"]:before{background-color:#2980b9}
pre[codetype="JavaScript"] code{border-left: 5px solid #2980b9;}
pre[codetype="JQuery"]:before{background-color:#16a085}
pre[codetype="JQuery"] code{border-left: 5px solid #16a085;}
}

Note : Edit sesuai dengan keinginan.

3. Save.

Cara Pemakaiannya:

Tambahkan codetype="JENIS_KODE" dalam pre saat menuliskan kode dalam postingan (Mode HTML). Lihat contoh ini :

<pre codetype="CSS"><code> ------- </code></pre> /* Untuk Kode CSS */
<pre codetype="HTML"><code> ------- </code></pre> /* Untuk Kode HTML */
<pre codetype="JavaScript"><code> ------- </code></pre> /* Untuk Kode JS */
<pre codetype="JQuery"><code> ------- </code></pre> /* Untuk Kode JQuery */

Hanya ada 4 tipe Code yang ada diatas yang paling sering digunakan oleh kebanyakan blogger tutorial. Silahkan ditambahkan jika ingin memakai kode yang lain. Mau hasil yang lebih maksimal dan menarik untuk Tag Pre? Gunakan juga Syntax Highlighter (Mewarnai tulisan dalam Tag Pre Code). Baca artikel tentang Cara Membuat Kode Berwarna pada Tag Pre .

Sekian tutorial singkat mengenai cara penambahan Judul pada Tag Pre. Saya rasa tutorial diatas sudah jelas, namun jika ada hal yang ingin ditanyakan, silahkan berkomentar di bawah. Jika berlangganan artikel DesainKode secara Gratis, isi alamat email anda pada footer blog ini.