Cara Membuat Box Area di Postingan Blog

Hari ini saya akan membagikan kepada Anda sebuah cara untuk membuat box area di postingan blog. Box area ini hampir sama seperti "Blockquote", jadi fungsinya itu untuk memberi highlight terhadap teks tertentu yang ingin Anda beri kesan lebih kepada pembaca, semacam informasi penting atau biodata Anda.

Jika blockquote biasanya digunakan untuk memberi tanda pada kutipan seseorang atau makna dari satu istilah, sedangkan box area ini bisa Anda pakai untuk memberi highlight terhadap coding/script yang mungkin Anda bagikan kepada pembaca Anda.

Kalau ingin menggunakan blockquote kita hanya perlu menyeleksi kalimat lalu memilih simbol (") maka selesai, tetapi untuk membuat box area ini, Anda akan bermain dengan sedikit coding sederhana.

Baik langsung saja, ikuta cara dibawah ini :

1. Buatlah postingan baru, kemudian di blog post mode pilih HTML mode
2. Lalu kalian salin dan pastekan Kode dibawah ini dan pastekan disana.

<div style="background: #F1F5F9 repeat; repeat; padding: 10px; border:2px dashed #A3CEDC; border-top-left-radius: 0px 0px; border-top-right-radius: 0px 0px; border-bottom-left-radius: 0px 0px; border-bottom-right-radius: 0px 0px;"><center></center>

PASTEKAN TEKS ANDA DISINI

</div>

3. Jika sudah, buka mode Compose dan lihat hasilnya.

Ini adalah contoh box area muammarkhalid.com

Kostumisasi kode :

Merah : Adalah kode warna background dari box area tersebut. Cek warna HTML (disini)

Biru : Adalah kode untuk mengubah ukuran border, contoh 3px atau 4px

Hijau : Adalah kode untuk mengganti style garis border

Orange : Adalah kode warna garis border dari box area tersebut. Cek warna HTML (disini)

Hitam : Ini adalah kode bagi Anda yang ingin pinggiran/sudut box area tidak kotak (tumpul)

Jadi, saya harap tips cara membuat box area di postingan blog dari saya kali ini bermamfaat untuk Anda. Silahkan mencoba, jika Anda mengalami kendala, silahkan tinggalkan komentar dibawah dan saya akan coba menjawab semampu saya. Terimakasih :)