Cara Membuat Kotak Kode dengan CSS di Blogger – Kali ini saya akan membagikan car membuat kotak kode CSS/HTML/JavaScript (Syntax Highlighter) sederhana di postingan blogger dengan mengunakan CSS atau tanpa javascript.
Syntax Highlighter adalah teks markup kode pada halaman website yang biasa berisi tulisan berwarna warni untuk mempermudah melihat kode tersebut. Biasanya berbentuk seperti background hitam dan berisi tulisan kode berwarna di dalamnya.
Sebenarnya sebelumnya saya sudah pernah menjelaskan cara membuat kota kode syntax highlighter dengan menggunakan JavaScript agar kodingnya tersebut berwarna-warni. Namun pada kesempatan ini saya membuatnya murni menggunakan CSS agar lebih ringan dan tidak mengganggu kecepatan loading blog.
Cara Membuat Kotak Kode Dengan CSS di Blogger
1. Buka Blogger > pilih Tema > klik Edit HTML
2. Letakkan kode dibawah ini, tepat berada diatas kode </style> atau ]]></b:skin>
/* Code Box */
pre{white-space:pre-wrap;padding:10px;margin:10px;font-size:12px;line-height:1.5;background:rgba(27,27,27,0.91);border-left:10px solid #000;color:#cfcfa7;}
mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}| Kode | Keterangan |
|---|---|
| 12px | Ukuran teks (font) |
| #000 | Warna border kiri |
| #cfcfa7 | Warna teks |
| #f24a4a | Warna Mark (Stabilo/Background color) |
3. Jika sudah pilih Simpan Tema
Cara Menggunakan Kota Kode di Postingan Blog
1. Buat Postingan baru
2. Pilih Menu HTML (Bukan Compose)
3. Kemudian letakkan kode ini di dalamnya
<pre><code>TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>Jika ingin membuat warna stabilo seperti diatas (Background color/mark) gunakan kode ini di dalamnya:
<mark>Stabilo Kode</mark>Penting: Perlu kalian ketahui bahwa bahwa untuk menulis kode HTML atau JavaScript dalam kotak koding (Syntax Highlighter), kalian wajib melakukan parse HTML terlebih dahulu disini Parse HTML.
Demikianlah Tutorial dari analisyuki.com tentang Cara Membuat Kotak Kode dengan CSS di Blogger, semoga tutorial ini bisa berguna untuk kalian yang memfokuskan pada kecepatan blogger, Terimakasih.
