Cara Menciptakan Kotak Script Di Postingan Blog

Seorang blogger niscaya akan bosan kalau melihat tampilan blognya menyerupai itu-itu saja. Apalagi kalau postingan artikel tersebut terdapat aba-aba script menyerupai HTML, CSS, atau bahasa pemrograman, akan terlihat kurang rapih kalau kode-kode tersebut tidak ditempatkan di kawasan khusus menyerupai kotak box. Selain itu, kalau kita menempatkan aba-aba script tanpa ada kotak script yang menjadi pemisah antara artikel dengan aba-aba script, biasanya akan terjadi error atau tidak muncul sama sekali. Oleh sebab itu, artikel kali ini akan membahas terkai cara untuk menciptakan kotak script di antara artikel blog. Komponen aba-aba yang biasanya ada di kotak script yaitu menyerupai berikut

Cara Membuat Kotak Script di Postingan Blog

1. Border

Adalah garis yang membentuk kotak, ketebalan border sanggup diatur dengan cara memperbesar nilai px nya

2. Double

Bisa diganti dengan memakai aba-aba dashed, ridge, inset, groove, solid, dan dotted

3. Padding

Adalah aba-aba HTML yang berfungsi untuk memilih lebar ataupun panjang kotak script dengan memperbesar nilai px nya

4. Background Color

Adalah aba-aba HTML yang bekerjasama dengan warna dari kotak script.

5. Text Align

Berfungsi untuk merubah posisi text apakah rata kiri, tengah, kanan, atau rata kiri dan kanan

Dan untuk koda HTML nya ada dibawah ini berikut dengan contohnya

 <pre style="background-color: lightgreen; border-radius: 0.25rem; box-sizing: inherit; margin-bottom: 1rem; overflow: auto; padding: 1rem;">LETAKKAN KODE SCRIPT DISINI</pre>

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">LETAKKAN KODE SCRIPT DISINI

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">LETAKKAN KODE SCRIPT 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;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

Untuk meletakkan kotak script tersebut, pastikan dikala menulis artikel berada pada metode HTML bukan metode Compose. Setelah meletakkan kotak script di metode HTML, kalian sanggup kembali pada sajian Compose, dan memasukkan aba-aba scriptnya. Itulah cara untuk menciptakan kotak script di artikel blog. Selamat mencoba dan biar bermanfaat