Membuat Judul Pre Tag Pada Blog

Sebuah judul pada setiap hal yang akan kita jelaskan atau kita rincikan memang perlu pada dasarnya karena ini bertujuan untuk seseorang mengetahui jadi inti yang kita bahas ini apa. Misalkan anda sedang menceritakan tentang kejadian memancing ikan dihutan dengan panjang lebarnya anda jelaskan dari persiapan memancing sampai pulang makan hasil pancingan itu anda mau buat judulnya apa entah itu judulnya Berlibur Ke Hutan, Berlibur Memancing Ke Hutan itu bebas hak anda yang jelas sebaiknya judul menentukan hasil apa yang dibahas. Pada intinya Judul adalah sedikit dari inti tema yang kita bahas (kalo salah dikoreksi ya, hehe) 

Nah selanjutnya kita akan Membuat Judul Pre Tag Pada Blog. Tadi pada postingan sebelumnya saya menjelaskan bagaimana Membuat Syntax Otomatis Pada Blog kali ini saya akan membuat Judul Pre Tag Pada Blog nya. Caranya cukup mudah dan sangat simple yang saya rasa

Pertama anda masuk ke dashboard blogger

Lalu ke bagian Tema-Edit HTML

Kemudian masukan kode dibawah tepat diatas ]]</b:skin>

/* JUDUL TAG PRE by Marwanzaen */
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;}
pre[codetype="Catatan Penulis"]:before{background-color:#27768e}
pre[codetype="Catatan Penulis"] code{border-left: 5px solid #27768e;}
pre[codetype="Out Of Topic"]:before{background-color:#444}
pre[codetype="Out Of Topic"] code{border-left: 5px solid #444;}
}

Lalu anda Simpan.
 Kemudian bagaimana cara agar judul pre tag ini bekerja?
Caranya anda cukup masukan kode dibawah ini sesuai dengan kode yang akan anda buat

<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 */
<pre codetype="Catatan Penulis"><code> ------- </code></pre> /* Untuk Kode Catatan Penulis*/
<pre codetype="Out Of Topic">code> ------- </code></pre> /* Untuk Kode Out Of Topic */

Pada kesempatan kali ini saya menambahk kreasi saya yang Catatan Penulis & Out Of Topic itu karena itu termasuk kepentingan juga bagi saya.

Mudah bukan caranya. Selamat mencoba dan berkreasi.
Untuk demo anda bisa lihat disini

DEMO

Terima kasih anda telah membaca artikel Membuat Judul Pre Tag Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: