Cara membuat judul header untuk tag pre

Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini.

pertama silahkan buka editor template blogger sobat dan cari kode </style> atau jika sobat masih menggunakan struktur template defaul blogger cari kode ]]></b:skin> setelah ditemukan silahkan copy dan letakkan kode css di bawah ini di atas kode tadi:

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:#006666}
pre[data-codetype="HTML"]:before{background-color:#ffcc66}
pre[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre[data-codetype="JQuery"]:before{background-color:#99c262}

untuk menggunakan atau memanggilnya di dalam posting, buat di pos editor kode berikut 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

Silahkan hapus tulisan untuk css, html, js dan jquery yang ada di kode. jika anda ingin menambahkan lebih banyak judul untuk kode tag pre lakukan langkah seperti di atas dan jika setelah langkah semua diatas sudah sobat lakukan atur kembali css

margin:-11px -13px 10px -54px;

kode diatas menyesuaikan letak judul tag pre lebih ke kiri atau kanan.

semoga berhasil...