Cara Membuat Kotak Script Pada Postingan Blog

       Kita pasti sering melihat beberapa postingan yang ditambahkan dengan kotak script. Kotak script digunakan untuk meletakkan informasi-informasi yang dianggap penting, seperti kode HTML, javascript, maupun teks biasa. Selain itu, kotak script juga ditambahkan agar postingan terlihat lebih rapi dan menarik.

       Namun, untuk blogspot fitur ini tidak tersedia secara default. Sehingga kita diharuskan untuk membuatnya sendiri dengan menggunakan beberapa kode script. Jika kamu juga berniat untuk menambahkan kotak script pada postingan blog, caranya cukup mudah. Silahkan kamu ikuti langkah-langkah berikut.

1. Langkah pertama, buka dashboard blog kamu, selanjutnya pilih menu Post, lalu pilih Entri baru, atau edit entri yang sudah ada.
2. Selanjutnya kamu ubah mode penulisan menjadi HTML.
3. Kemudian copy dan pastekan salah satu kode di bawah.

4. Setelah itu, kamu ubah kembali mode penulisan menjadi Compose.

       Kotak script simple background

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #82CAFA; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #C2C2C2; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

       Kotak script dengan border

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #FFFFFF; border: 5px #000000 solid; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #FFFFFF; border: 5px #A0522D solid; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

       Kotak script background dan border

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #32CD32; border: 5px #0000CD solid; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

Masukkan scriptnya disini

Kodenya:

<div style="background-color: #B2C248; border: 5px #000000 solid; padding: 10px; text-align: left;"> Masukkan scriptnya disini </div>

       Kotak script dengan text area

Masukkan scriptnya disini

Kodenya:

 <textarea style="height: 75px; margin: 0px; width: 650px;"> Masukkan scriptnya disini </textarea>

Catatan:

• background-color: #82CAFA : Warna background (warnanya silahkan kamu ubah dengan warna lain).
• border: 5px : Ketebalan border.
• solid : Bentuk kotak (kode ini bisa kamu ganti dengan dashed, dotted, inset, outset, double, ridge, groove).
• padding: 10px : Jarak antara tulisan dengan kotak.
• text-align: left : Posisi tulisan di dalam kotak.

       Mungkin itulah informasi yang dapat saya berikan, semoga bermanfaat.

Baca juga Cara Menghilangkan Nama Blog di Depan Judul Artikel