Cara Membuat Script Box/Kotak Script di Postingan

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.

Dalam membuat kode script box/kotak html ini sebenarnya tidak terlalu sulit tetapi tidak mudah juga, minimal kamu tahu apa itu kode html bagaimana memakainya dan apa fungsinya.

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:

Cara Membuat Script Box

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

• Bagaimana Cara Redirect URL dengan Htaccess?
• Cara Defrag Harddisk Windows 10?
• Tutorial Cara Partisi Harddisk?
• Cara Membuat Blur Background Foto?

Kode Kotak Border-Dotted

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

TULISAN DISINI

Kode Kotak Scroll Vertikal

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

MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA

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 DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA</div>
</div>

MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA

Kesimpulan

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, #0180cf 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 dan jangan lupa berikan ekspresi kamu tentang artikel ini. Semoga artikel ini bermanfaat ya sob.