Membuat Judul pada Tag Pre Code

Posted by Desain Kode Thursday, January 14, 2016 2 comments
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 pada tag pre code

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.

2 comments

Marwan Abdul Anwar
Balas
Marwan Abdul Anwar
bang ana ada kesulitan ketika memasukan baris script misal css yang muncul malah hasilnya bukan teks script kode nya, itu bagaimana

Tautan (link) hidup dalam komentar bersifat nofollow.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Konversi Kode di Sini

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Batal