CARA MEMBUAT KOTAK SCRIPT PADA POSTINGAN AGAR TERLIHAT KEREN

Yang belum tahu apa itu kotak script, berikut penjelasannya. Kotak script adalah kotak yang membungkus tulisan atau kalimat.

Contoh kotak script sebagai berikut:

Ini adalah contoh kotak script

Yang membuat sebuah kotak script terlihat keren hanya tergantung pada dua unsur yaitu border [bingkai dari kotak script] dan warna latar belakangnya.

Untuk membuat sebuah kotak script pada postingan kita cukup memasukkan kode HTML dari kotak script tersebut ke posisi yang kita inginkan.

Jadi untuk membuat kotak script kita harus pindah dari mode Compose ke mode HTML.

Ini adalah kode HTML dari kotak script yang tadi:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffe599; text-align: left;"> Masukkan Tulisan Disini</div>

Berikut penjelasan dari kode HTML kotak script di atas:

border: 3px #1780dd Double

• 3px adalah tebal dari garis kotak script
• #1780dd adalah warna dari garis kotak script
• Double adalah banyaknya garis dari kotak script. Kita bisa menggantinya dengan solid [satu garis], dashed [garis putus-putus], dotted [garis titik-titik], dan lain-lain. Yang lainnya bisa anda cari di mbah google.

Agar lebih memahami coba kita rubah 3px manjadi 10px, #1780dd menjadi #ff0000, dan double menjadi solid. Dan hasilnya akan menjadi seperti berikut ini:

<div style="border: 10px #ff0000 solid; padding: 10px;background-color:#ffe599; text-align: left;"> Masukkan Tulisan Disini</div>

background-color:#ffe599

Pada bagian ini kita bisa merubah warna latar belakang dari kotak script, sebagai contoh kita rubah #ffe599 menjadi #ffffff [warna putih]

<div style="border: 10px #ff0000 solid; padding: 10px;background-color:#ffffff; text-align: left;"> Masukkan Tulisan Disini</div>

Masukkan Tulisan Disini

Ini adalah tempat tulisan atau kalimat yang ada dalam kotak script, kita bisa meng-copy paste nya dengan tulisan yang kita inginkan.

Atau bisa juga mengetiknya langsung dengan menghapus Masukkan Tulisan Disini terlebih dahulu.

Berikut adalah contoh-contoh kotak script beserta kode HTMLnya. Disini di beberapa kotak script saya menggunakan warna putih sebagai latar belakangnya. Jika anda ingin merubah warna latar belakangnya silahkan ganti kode warna putih yaitu #ffffff dengan kode warna yang anda inginkan.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff; text-align: left;"> Masukkan Tulisan Disini</div>

<div style="border: 3px #1780dd double; padding: 10px;background-color:#ffffff; text-align: left;"> Masukkan Tulisan Disini</div>

<div style="border: 3px #1780dd dashed; padding: 10px;background-color:#ffffff; text-align: left;"> Masukkan Tulisan 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;">Masukkan Tulisan 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;">Masukkan Tulisan 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;">Masukkan Tulisan Disini</div>

Atau model scroll berikut:

<div style="border: 3px #1780dd double; padding: 10px; background-color: #ffffff; overflow: auto; height: 50px; width: 300px; text-align: left;"> Masukkan Tulisan Disini</div>

Untuk mode scroll ini bisa kita ubah dengan mengganti height: 50px [tinggi] dan width: 300px [lebar] sesuai keinginan.

Atau bentuk modifikasi  berikut:

<div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;"><div style="background-color: white; border: 3px #1780dd double; padding: 10px; text-align: left;">Masukkan Tulisan Disini</div></div>

JUDUL

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px solid #aaa; padding: 10px; t-align: left;">JUDUL</div><div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Masukkan Tulisan Disini</div>

JUDUL

<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">JUDUL</div><div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">Masukkan Tulisan Disini</div>

####SEMOGA BERMAMFAAT####

Bagikan Artikel ini