Cara Membuat Kotak Script di Postingan Blog

Untuk membuat catatan kodingan di postingan blog, ada perasaan ingin memberikan highlight kepada kode-kode itu, alih-alih melakukan copy-paste dan berwujudlah kodingan seperti postingan biasa. Mungkin kita bisa mengatur dan membedakan jenis font ataupun warnanya dengan tulisan yang lain. Tapi kok rasanya ingin lebih meng-highlight-nya dengan menempatkannya di dalam sebuah kotak? Jika kamu berpikiran yang sama dengan saya, maka mungkin catatan ini akan bermanfaat, semoga.

Dalam membuat kotak script di dalam postingan blog kali ini saya menggunakan tag <pre> dan mengatur desain kotaknya dengan CSS.

Jadi, pertama kita tempatkan kode CSS di blog. Caranya bisa dengan kode: ]]></b:skin> lalu di atasnya tempelkan script berikut:

/* KOTAK SCRIPT DI POSTINGAN BLOG */
 pre{
 white-space:pre-wrap;
 padding:10px;
 margin:10px;
 font-size:12px;
 color: #ffffff;
 line-height:1.5;
 background:rgba(27,27,27,0.91);
 border-left:10px solid #000;
} /* END KOTAK SCRIPT DI POSTINGAN BLOG */

Nah, pada postingan baru di blog, kita tinggal menempatkan tag ini:

<pre> (dan tempatkan script di bagian sini) </pre>

Saya menambahkan:

overflow: auto;

max-height: 300px;

Supaya ada fitur scroll ketika kodingannya lebih panjang daripada 500px.

Hasilnya: (yak, hasilnya barangkali seperti yang pembaca lihat di blog ini, tapi tak apalah, akan saya lampirkan saja screenshot hasilnya, mana tahu kotak blog pada blog ini akan berubah suatu saat nanti kan ya?)

Diambil dari postingan: Membuat Auto Read More di Blogspot (Januari 2022)

Sekian, semoga bermanfaat.