Cara Membuat Kotak Script pada Postingan lengkap

السلام عليكم

 Salam Rahayu dan Damai selalu.
Sahabatku yang baik hati, kali ini kita akan belajar cara membuat kotak script di post/artikel.
Salah satu tujuan kotak script ini sendiri adalah untuk membedakan antara postingan dengan kode atau kalimat tertentu, agar lebih mendapat perhatian dari pembaca dan lebih bagus serta enak dibaca tentunya.

Adapun cara penerapannya adalah:

1. Kita masuk ke akun blog kita
2. Klik entri baru >> kita tulis yang akan kita posting.
3. Klik HTML >> masukkan/paste kode script yang akan kita pasang.
4. Klik 'compose'. Maka akan keluar kotak script nya.
5. Setalah kita klik 'compose' maka akan keluar kotak yang di tengahnya ada tulisan 'letakkan kode scriptnya di sini'. 
nah di situlah kita tulis kode/kalimat yang akan kita masukkan dalam kotak.
6. Selanjutnya seperti biasa.

baca juga:cara membuat kotak scroll dengan mudah

Banyak sekali kotak script yang sering kita jumpai pada artikel artikel senior kita, karena memang kadang dibutuhkan.

Mari kita simak bersama.

#. Bentuk kotak script dan kodenya di dalamnya.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;">letakkan kode scriptnya di sini</div>

keterangan kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;">letakkan kode scriptnya di sini</div>

#. border: 3px = ketebalan kotak script, bisa kita rubah.

#.    #1780dd = warna kotak script.

#. Double : bentuk kotaknya. (kode ini bisa diganti dengan kode yang lain, atau juga dihilangkan).

untuk kode double, bisa kita ganti dengan : dotted, dashet, groove, inset, outset, ridge, solid dan terserah kita yang lainnya.

#. padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.

#.   background-color:ffffff; = warna dalam kotak.
untuk mengetahui warna lengkap silahkan tengok daftar kode warna lengkap di blog ini juga ya bos.

#.   text-align:left; = posisi tulisan didalam kotak di kiri,

bisa kita ganti : right: (rata kanan), center: (rata tengah).

<div style="border: 2px #1780dd Dotted; padding: 10px;background color:#ffffff;text-align: center;">letakkan kode scriptnya di sini</div>

<div style="background-color: #fff000; border-radius: 25px; border: 4px solid #999; padding: 10px; text-align: center;">letakkan kode scriptnya di sini</div>

border-radius: 25px , 
angka 25px adalah untuk lengkung garisnya. Semakin besar angkanya semakin besar lengkungannya.
Gak percaya...silahkan ganti dengan angka yang lebih besar.

<div style="border: 2px dotted #444999; padding: 10px; background-color: #eaeaea; text-align: left;">letakkan Kode Scriptnya  Di Sini</div>

<div style="background-color: green; border-left: 9px #44dd99 solid; padding: 10px; text-align: center;">letakkan kode scriptnya di sini</div>

<div style="background-color: #ff33ff; border-radius: 10px; border-radius: 10px; border-radius: 10px; border-right: 5px solid #2288dd; padding: 10px; text-align: left;">letakkan kode scriptnya Di sini</div>

<div style="background-color: #ff4466; border-left: 5px solid #2288dd; border-radius: 10px; border-radius: 10px; border-radius: 10px; border-right: 5px solid #2288dd; padding: 10px; text-align: leright;">letakkan kode scriptnya Di sini</div>

<div style="background-color: #ff3300; border-radius: 10px; border-radius: 10px; border-radius: 10px; border: 4px double #ffda00; padding: 10px; text-align: left;">

<div style="background-color: #6fa800; border-radius: 10px; border-radius: 70px; border-radius: 90px; border: 4px double #fff999; padding: 10px; text-align:right;">letakkan Kode Scriptnya  Di sini</div>

<div style="border-radius: 10px;border-radius: 10px; background-color: #00ff00; border-radius: 10px; border: 4px solid #999; padding: 10px; text-align: left;">letakkan kode scriptnya di sini</div>

<div style="border-radius: 15px;border-radius: 15px; background-color: #3300ff; border-radius: 10px; border: 5px groove #00ff00; padding: 10px; text-align: left;">letakkan kode scriptnya di sini</div>

<div style="border-radius: 10px;border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; text-align: left;">letakkan Kode Scriptnya  Di sini</div>

<div style="background-color: #993333; ; border-top: 6px solid #33ffff; padding: 10px; text-align: left;">letakkan kode scriptnya di sini</div>

<div style="border-radius: 10px;border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; text-align: left;">letakkan Kode Scriptnya Di sini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: center;"> letakkan Kode Script Di sini</div>

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

<div style="background-color: #a233c9; border-radius: 10px; border-radius: 10px; border-radius: 10px; border: 4px inset #fff000; padding: 10px; text-align: center;">letakkan Kode Scriptnya Di sini</div>

baca juga: cara membuat garis di bawah judul postingan

Silahkan kita berkreasi sesuka hati kita, dan silahkan dicoba.
Karena lebih baik salah karena mencoba, daripada tidak pernah salah karena tidak pernah mencoba.

Sampai di sini, belajar cara membuat kotak script kita kali ini.
Tentunya banyak kesasalahan, mohon dimaafkan ya bos.
Jangan lupa koreksi dan pencerahannya.
Salam Rahayu selalu.

والسلا عليكم