Cara Membuat Kotak Berbagi Script di Blogger

Menampilkan potongan script di artikel blog adalah cara yang efektif untuk berbagi pengetahuan teknis.

Namun, ketika script yang ingin Anda tampilkan terlalu panjang, penting untuk memastikan bahwa tampilannya tetap rapi dan bisa digulir.

Pada artikel ini, saya akan menunjukkan cara membuat kotak box HTML yang dapat di-scroll secara horizontal dan vertikal.

Cara Membuat Kotak Berbagi HTML

1. Masuk pada artikel dimana kamu ingin membagikan script.

2. Pilih “Tampilan HTML”.

3. Pastekan kode berikut di artikel (letaknya sesuai keinginan).

<style>
    .code-box {
        background-color: #f5f7fa; /* Warna latar belakang */
        border: 1px solid #d1d5db; /* Warna border */
        padding: 10px;
        border-radius: 5px;
        overflow-x: auto; /* Mengaktifkan scroll horizontal */
        overflow-y: auto; /* Mengaktifkan scroll vertikal */
        max-height: 300px; /* Batas tinggi agar scroll vertikal muncul */
        white-space: pre; /* Menjaga spasi dan format kode */
    }
</style>

<div class="code-box">
<pre>
<code>
&lt;!-- Masukkan script panjang Anda di sini --&gt;
&lt;script&gt;
    // Contoh script panjang untuk menguji scroll vertikal
    for (var i = 0; i < 100; i++) {
        console.log('Ini adalah baris ke-' + i + ' untuk menguji scroll vertikal.');
    }
&lt;/script&gt;
</code>
</pre>
</div>

4. Lalu kembali ke tampilan menulis.

5. Sekarang kamu bisa meletakkan script yang ingin dibagikan dengan menimpa pada teks yang saya beri tanda merah berikut.

6. Klik preview untuk melihat hasilnya.

Kamu juga bisa mengubah warna background, border, dan juga ukuran kotak scriptnya pada bagian yang saya beri keterangan bintang.

Sekian tutorial yang bisa saya bagikan pada artikel kali ini.

Jika kamu memiliki kendala, silakan tanyakan di kolom komentar, terima kasih.