Tutorial Cara Membuat Kotak Di Postingan Blog

Apakah kamu ingin bikin kotak dalam postingan artikel tapi tidak tahu caranya? Sini aku akan bagi cara bikin text box di dalam postingan blog.

Nah sebenarnya caranya gampang tapi kamu harus cermat dan rajin latihan supaya hasilnya bener. Semua cara ini sudah pernah aku lakukan di berbagai blog aku yang berbasis blogspot. 

kotak di dalam artikel blog

Fungsi Kotak Teks Dalam Artikel

Apa fungsi dari box dalam postingan? Banyak banget. Aku akan jelaskan satu per satu di bawah ini. 

1. Buat menulis kode HTML maupun CSS.

2. Menulis Table of Content.

3. Menulis quotes.

4. Menulis kalimat atau hal yang ingin ditekankan.

Kotak yang bagus akan berfungsi juga untuk memperindah artikelmu. Karena pembaca akan langsung tertuju ke sana. Lalu bagaimana langkah-langkah untuk membuatnya? 

Cara Membuat Kotak Di Artikel Blogspo

1. Masuk / Login ke dashboard akun Blogspot.

2. Pilih ENTRI BARU.

3. Buatlah tulisan.

4. Kemudian pilih mode HTML.

5. Masukan  salah satu kode untuk membuat kotak postingan di bawah

6. Kemudian Compose

7. Setelah itu copy tulisan yang telah anda buat

8. Dan Paste ke dalam kotak text 


Berikut kotak teks untuk post di blog dengan Border (bingkai/garis batas)

border: 3px

 #1780dd Double; padding: 10px;background-color:#ffffff;

text-align: left;masukan tulisan anda disini
Keterangan:

• border: 3px merupakan ketebalan garis pinggir kotak teks 
• #1780dd warna garis batas/ pinggir kotak teks 
• Double adalah bentuk dari garis batas pada pinggir kotak teks  
• padding: 10px merupakan panjang kotak teks dari atas ke bawah 
• background-color:#ffffff adalah warna latar belakan dari kotak teks 
• text-align: left  posisi kotak teks (text box) di bagian sisi kir

Berikut dibawah ini script bentuk bentuk kotak teks :

 

masukan tulisan kamu di sini (Dotted).

Kode Html:
<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">
masukan tulisan anda disini (Dotted)</div>

masukan tulisan kamu di sini (Dashed)

<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">
masukan tulisan anda disini (Dashed)</div>

masukan tulisan kamu di sini (Solid)

<div style="background-color: white; border: 3px #1780dd solid; padding: 10px; text-align: left;">
masukan tulisan anda disini (Solid)</div>

masukan tulisan kamu di sini (Groove)

<div style="background-color: white; border: 3px #1780dd groove; padding: 10px; text-align: left;">
masukan tulisan anda disini (Groove)</div>

masukan tulisan kamu di sini (Inset)

<div style="background-color: white; border: 3px #1780dd inset; padding: 10px; text-align: left;">
masukan tulisan anda disini (Inset)</div>

masukan tulisan kamu di sini (Ridge)

<div style="background-color: white; border: 3px #1780dd ridge; padding: 10px; text-align: left;">
masukan tulisan anda disini (Ridge)</div>

masukan tulisan kamu di sini (outset)

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;">
masukan tulisan anda disini (outset)</div>

Untuk kode script html kotak text yang tidak memiliki border dibawah ini script htmlnya:

Tanpa Border / Garis Tepi

Kode script html:
 
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
masukan text disini
</div>

Itulah cara buat kotak di artikel yang berfungsi antara lain memasukkan kode html atau quotes. Ikuti terus Bang Rojali yang bakalan kasih kamu berbagai tutorial penting lainnya.