Cara membuat kotak script dalam postingan blog

"Di kesempatan kali ini saya akan coba membahas mengenai cara bagaimana membuat kotak script dalam postingan atau artikel.

Apa itu kotak script ?

Kotak script tex box atau dikenal dengan text box area adalah 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 atau artikel di blog atau website.

Mungkin bagi anda yang sering membaca atau sekedar mencari informasi tentang sesuatu yang sedang anda cari, di dalam postingan nya ada sebuah kotak yang menunjukkan hal hal yang penting yang mengharuskan anda untuk membacanya, seakan anda bertanya ,kok bagus ya ,bagaimana cara membuatnya ?

   "Langsung saja ke pokok pembahasan.

Secara default, platform Blogspot dan Wordpress masing-masing theme sudah menyediakan fitur yang di namakan“blockquote”.

Kita tinggal hanya menseting, dengan cara drag paragraf-nya dan klik “tanda kutip dua” di bagian toolbar pada panel postingan. Hanya saja layout-nya kurang menarik dan modelnya juga cuma itu-itu saja.

Di bawah ini ada beberapa code untuk membuat kotak script di dalam postingan blog, yang bisa anda pilih :

1. 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 anda di sini..! </div>

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

<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

3. 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 anda di sini..! </div>

4. 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 anda di sini..! </div>

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

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

6. 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 anda di sini..! </div>

7. Kotak Script dengan left-border

<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

8. Kotak Script dengan top-border

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

9. Kotak Script dengan double-border

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

10. Kotak Script dengan single-border solid 4px

<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

11. Kotak Script dengan single-border solid 2px

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

12. Kotak Script sederhana tanpa lis border

<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Catatan :

• Background-color (warna kotak script) 
• Border-color(warna garis border) 
• Border (..)px (ketebalan garis border) text-align (posisi script). 

Cara membuat kotak Script dalam postingan blog Anda cukup ikuti langkah-langkah di bawah ini :

• Masukk ke Dashboard Blog
• Posting/New Entry Tulis konten seperti biasa sampai selesai Ganti mode penulisan dari “Compose” menjadi “HTML” 
• Copyrr script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis script anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan. Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.

Sekian ulasan mengenai cara membuat kotak Script dalam postingan blog, selamat mencoba semoga bermanfaat !!!