Membuat Kotak Teks/Kotak Script Di Dalam Postingan


Farhan Share - Sobat farhan pada postingan kali ini farhan akan berbagi tentang cara membuat Kotak Teks/Kotak Script di dalam postingan. Sebenarnya apa sih kotak script dan kegunaanya? Ya, sobat farhan kotak script atau yang sering disebut kotak teks adalah text area untuk membatasi teks yang dianggap penting seperti point dari artikel, inti dari cerita, maupun script dalam memberikan tutorial blog, contoh teks area atau kotak teks sobat farhan bisa lihat pada gambar di atas. Kegunaanya adalah seperti yang farhan sebutkan tadi, misalnya untuk pembatas antara teks script dan teks biasa dalam memberikan Tutorial Blog, agar  pengunjung tidak bingung dalam membedakan yang mana teks biasa dan yang mana script, dll. Baik, sobat farhan di bawah ini farhan sudah persiapkan contoh kotak teks dan kode scriptnya, di simak baik-baik ya.

1. SOLID
Tampilan:
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px solid #000000; background-color:#A9F5A9; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

2. DOTTED
Tampilan:
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px dotted #000000; background-color:#81F7F3; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

3. DASHED
Tampilan:
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 1px dashed #faac58; background-color:#F4FA58; padding: 5px;width: 330px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

4. DOUBLE
Tampilan:
Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 4px double #000000; background-color:#BDBDBD; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

5. GROOVE
Tampilan:

Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 4px groove #000000; background-color:#FFFFFF; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>


6. OUTSET
Tampilan:

Tulisan/script HTML atau artikel blog letakkan disini


Kode:
<div style="border: 4px outset #000000; background-color:#FA5858; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

7. RIDGE
Tampilan:

Tulisan/script HTML atau artikel blog letakkan disini

Kode:
<div style="border: 4px ridge #faac58; background-color:#FAAC58; padding: 5px;width: 340px;">Tulisan/script HTML atau artikel blog letakkan disini</div>

Format Postingan:

<div style="border: 1px dotted #000000; background-color:#81F7F3; padding: 5px;width: 330px;">Teks Script/Teks Area</div>


Catatan : Ganti kode yang berwarna merah dengan teks script atau tulisan yang kamu ingin berikan Kotak Script/Kotak Teks

Demikian sobat farhan artikel tentang Cara membuat kotak teks/kotak script di dalam postingan, semoga bermanfaat, bila ada pertanyaan comment di bawah.

Postingan terkait: