Cara Membuat Script Box

Dalam membuat artikel tentang coding pasti kamu sering menempatkan kode tersebut dalam postingan, jika kamu seorang blogger sudah tidak asing lagi dengan menempatkan kode dengan script box agar kode tersebut tidak acak-acakan dan akan terlihat rapih demi memudahkan pembaca dalam membaca kode tersebut.

Pada postingan ini saya akan memberikan cara membuat script box yang bisa kamu gunakan dalam pembelajaran maupun bagi seorang blogger biasanya dipakai untuk menempatkan kode agar terlihat rapih. 

Ada banyak jenis script box yang bisa kamu gunakan, kamu tinggal memasangnya saja dan mengatur ukuran serta warna. Berikut script box yang bisa kamu pakai untuk meletakkan kode dalam postingan: 

Kode Kotak Scroll Vertikal

<div style="background-color: white; border: 2px solid #0180cf; height: 70px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN KODE HTML INI
</div>

Kode Kotak Scroll Vertikal dan Horizontal

<div style="border: 2px solid #0180cf; height: 70px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 1000%;">
MASUKKAN KODE HTML INI</div>
</div>

Kode Kotak Double-Border

<div style="background-color: #ace5f4; border: 3px #0180cf double; padding: 10px; text-align: left;">MASUKKAN KODE HTML DISINI </div>

MASUKKAN KODE HTML DISINI

Kode Kotak Single-Border

<div style="background-color: #ace5f4; border: 3px solid #0180cf ; padding: 10px; text-align: left;">MASUKKAN KODE HTML DISINI </div>

MASUKKAN KODE HTML DISINI

Kode Kotak Border-Dotted

<div style="background-color: #ace5f4; border: 2px #0180cf dotted; padding:10px; text-align:left;">MASUKKAN KODE HTML DISINI</div>

MASUKKAN KODE HTML DISINI

Nah, itu dia cara membuat script box/kotak html di dalam postingan. Sebenarnya masih banyak kode script box yang ada, kamu bisa mengganti warna atau ukuran sesuai dengan keiinginan kamu.

Ganti kode 

#0180cf untuk mengganti warna border, 

#ace5f4 untuk mengganti warna background, dan Merah untuk kode html kamu.

Demikian artikel tentang cara membuat script box atau kotak html dengan mudah, jika ada kendala tinggalkan komen dibawah postingan ini.