Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
23 Feb 2014

Menambahkan Judul pada Tag Pre

Menambahkan Judul pada Tag Pre - Masih seputar pembahasan episode artikel TAG PRE, kali ini saya akan menambahkan/menyisipkan judul pada Tag Pre.

code icon

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

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>

CSS


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=&quot;CSS&quot;]:before{background-color:#5fbbba}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#4fc1eb}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]: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

HTML


<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...

Sumber : http://blog.kangismet.net/2013/11/membuat-judul-pada-tag-pre.html

3 Komentar

Wah Artikel Yang Bermanfaat Ditunggu Kunjungannya..

Hasilnya seperti apa ya?

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup