Cara Membuat Kotak Script di Dalam Postingan Blog [Lengkap 2020]

Hallo sahabat Agus Tutor, Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang mempunyai fungsi untuk membuat tulisan atau script kode di dalamnya.

Kotak script ini ada 2 jenis tipe, yang pertama kotak script biasa dan yang kedua kotak script dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan website atau blog.

Sehingga pengunjung merasa nyaman ketika sedang membaca artikel yang ada di website atau blog tersebut.

Berikut cara membuat kotak script di dalam postingan blog.

Cara Membuat Kotak Script di Dalam Postingan Blog :

1. Masuk dashboard blog dan klik Entri Baru untuk membuat artikel baru yang akan ditambahkan kotak script

2. Kemudian isi judul dan klik mode HTML

3. Setelah itu masukkan kode berikut, masih dalam mode HTML :

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
.Masukkan Kode Script Sobat Disini.</div>

Ganti tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak. Jika sudah klik Mode Compose untuk melihat hasilnya.

4. Berikut adalah tampilan kotak script biasa tanpa scroll yang telah anda buat.

Jika anda ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna biru seperti dibawah ini

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Masukkan Kode Script Sobat Disini.</div>

Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya.

Jika sudah bisa klik Publikasikan untuk mengepost artikel.. Selesai

5. Berikut adalah pilihan text box / kotak script yang berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih keren :

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Sobat Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Sobat Disini</div>

Demikianlah tutorial singkat mengenai Cara Membuat Kotak Script di Dalam Postingan Blog [Lengkap 2020], semoga artikel kali ini bisa membantu anda. Terima Kasih.