Cara Membuat Kotak Box Script di Postingan Blogger

 

Kotak Script atau Text Box Area merupakan sebuah kotak khusus yang bisa digunakan untuk meletakkan kode script HTML, CSS, Java script, atau bahasa pemograman lainnya. Tidak hanya itu, kotak script juga bisa digunakan untuk catatan penting atau tulisan penegasan pada postingan di blog.

Selain untuk mempermudah pembaca memahami tulisan kita, halaman postingan juga akan telihat rapi dan terkesan lebih elegan. Sehingga pembaca bisa membedakan mana script dan mana artikelnya.

Jika anda sedang mencari cara membuat kotak box script didalam postingan blog yang keren. Berikut saya berikan daftar kode untuk membuat kotak script di postingan blog, yang bisa kamu gunakan:

Contoh Kode-Kode Kotak Box Script:

1. Kotak Script sederhana tanpa list border

<div style="background-color: yellow; padding: 10px; text-align: left;"> Tulis Script Disini.. </div>

2. Kotak Script dengan single-border solid 2px

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis Script Disini.. </div>

3. Kotak Script dengan single-border solid 4px

<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis Script Disini.. </div>

4. Kotak Script dengan double-border

<div style="background-color: lightcyan; border: 3px #fa7a02 double; padding: 10px; text-align: left;"> Tulis Script Disini.. </div>

5. Kotak Script dengan top-border

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis Script Disini.. </div>

6. Kotak Script dengan left-border

<div style="background-color: #f3f3f3; border-left: 10px solid #fa7a02; padding: 10px; t-align: left;"> Tulis Script Disini.. </div>

7. Kotak Script dengan dotted-border (garis titik-titik/dots)

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis Script Disini.. </div>

8. Kotak Script dengan dashed-border (garis putus-putus)

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis Script Disini.. </div>

9. Kotak Script dengan inset-border (seperti tertanam pada halaman postingan)

<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis Script Disini.. </div>

10. Kotak Script dengan outset-border (seperti keluar dari halaman postingan)

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;"> Tulis Script Disini.. </div>

11. Kotak Script dengan ridge-border (seperti timbul)

<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis Script Disini.. </div>

12. Kotak Script dengan groove-border (seperti masuk ke dalam halaman postingan)

<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;"> Tulis Script Disini.. </div>

Catatan:

• fungsi kode background-color (warna kotak script)
• fungsi kode border-color (warna garis border)
• fungsi kode border : (..) px (ketebalan garis border)
• fungsi kode text-align (posisi script).

Baiklah, itu tadi beberapa refrensi kode kotak script di dalam postingan blogger yang bisa kamu coba. Selanjutnya silahkan berkreasi sendiri untuk pilihan warna, bentuk dan ukuran kotak script bisa kamu custom sesuai keinginan

Cara Membuat Kotak Box Script di dalam Postingan Blogger

1. Masuk ke Dashboard
2. Buat Postingan Baru

3. Tulis konten seperti biasa sampai selesai

4. Ganti mode penulisan dari "Tampilan Menulis" menjadi "Tampilan HTML"

4. Copy kotak script diatas yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian inginkan.

5. Kembali ganti mode penulisan dari "Tampilan HTML" menjadi "Tampilan Menulis", lalu edit "Tulis Script Disini.." ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.

6. Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
Terakhir silahkan dipublikasikan. Selesai, berikut hasilnya seperti gambar dibawah ini.

Hasilnya Pembuatan Kotak Box Script di dalam Postingan Blogger

Demikian artikel cara membuat kotak box script di dalam postingan blogger. Semoga bermanfaat dan menambah wawasan kita semua. 

Kalau kamu menyukai postingan Tutorial Blogger kali ini, jangan sungkan untuk membangikannya ke teman-temanmu di media sosial. Supaya mereka juga tahu!

Salam, Blogger Indonesia