Tutorial Cara Menambahkan Kotak Teks dengan Border di Pada Entri

 Hai semua! Kali ini, aku nak berkongsi tutorial mudah untuk membuat kotak teks dengan pelbagai jenis border dan background dalam entri blog korang.

Kotak teks dan background dapat digunakan untuk memisahkan teks dari latar belakang halaman, sehingga meningkatkan pembacaan audience. Selain itu, kotak teks juga dapat menarik perhatian pembaca pada bahagian tertentu dari entri blog yang dianggap penting oleh penulis.

Dengan menggunakan kotak teks, korang dapat menyusun konten dengan lebih baik dengan mengambil petikan atau point penting sebagai catatan tambahan. Ini membantu pembaca memahami struktur dan alur konten dengan lebih mudah.

Contoh Kod Kotak Teks:

• div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;

  text-align: left;">masukan tulisan anda disini</div>

  
  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 belakang dari kotak teks
• - text-align: left posisi kotak teks (text box) di bagian sisi kiri

1. Kotak Jenis Berbingkai

<div style="border: 3px #1780dd Double; padding: 10px; background-color: #ffffff; text-align: left;">masukan tulisan anda di sini</div>

2. Kotak Jenis Dotted

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

3. Kotak Jenis Dashed

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

4. Kotak Jenis Solid

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

5. Jenis Tiada Kotak

<div style="background-color: #9EE2C7; padding: 10px; text-align: left;">masukan tulisan anda di sini</div>

Tutorial Cara Membuat Kotak Teks dan Background di Entri Blog

Ikuti langkah-langkah di bawah untuk mencantikkan lagi blog anda.

Langkah-langkah:

1. Masuk / Login ke akaun Blogger anda.

2. Buat entri baru.

3. Pilih bahagian HTML di sebelah atas bahagian kiri.

4. Pilih dan salin kod yang anda inginkan dari contoh di atas tadi. Sebagai contoh, aku pilih Kotak Jenis Dashed. 

5. Setelah selesai, pilih Compose.

6. Salin (COPY) tulisan yang telah anda tulis.

Bagaimana? Mudah kan tutorial kali ini? InsyaAllah, semoga bermanfaat. Jika korang ada sebarang pertanyaan atau soalan, boleh ajukan di ruangan komen di bawah. 

Selamat mencuba!

Sumber

Share: