Cara Buat Kotak Teks dan Background Pada Entri Blog

Assalamualaikum dan salam sejahtera

Kembali lagi dalam sesi tutorial dan panduan blog. Alhamdulillah. Kali ini aku nak kongsikan dengan anda cara untuk membuat Kotak Teks dan Background pada entri blog. Sebenarnya apa tujuan untuk Kotak Teks dan Background ni?

Tujuannya adalah untuk nampak kemas dan tersusun bila anda masukkan teks ke dalam kotak ini. Terutamanya untuk teks berunsur peringatan dan sebagainya. Bila dah nampak kemas, pastinya akan membuatkan pembaca berasa senang. Macam aku sendiri kadang-kadang guna juga kotak teks untuk beberapa peringatan dan sebagainya. Terima kasih kepada JepunTekno untuk tutorial ini. Tujuan aku menulis panduan ini di blog ini juga sebagai rujukan dimasa akan datang.

Baca Juga :[ Cara Check dan Buang Broken Links Pada Blog Anda ]

CARA BUAT KOTAK TEKS  DAN BACKGROUND PADA ENTRI BLOG

1. Masuk / Login ke akaun Blogger anda.

2. Buat entri baru.

3. Pilih bahagian HTML, disebelah atas bahagian kiri ya.

4. Pilih kod yang anda inginkan seperti dibawah.

5. Setelah selesai, pilih Compose.

6. Kemudian, COPY tulisan yang telah anda tulis.

7. PASTE ke dalam kotak tersebut. 

1. Kotak Jenis Berbingkai

masukan tulisan anda disini

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

2. Kotak Jenis Dotted

masukan tulisan anda disini (Dotted)

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

3. Kotak Jenis Dashed

masukan tulisan anda disini (Dashed)

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

4. Kotak Jenis Solid

masukan tulisan anda disini (Solid)

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

5. Kotak Jenis Groove

masukan tulisan anda disini (Groove)

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

6. Kotak Jenis Inset

masukan tulisan anda disini (Inset)

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

7. Kotak Jenis Ridge

masukan tulisan anda disini (Ridge)

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

8. Kotak Jenis Outset

masukan tulisan anda disini (outset)

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

9. Jenis Tiada Kotak

masukan text disini

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

Bagaimana? Mudah kan tutorial kali ini? In shaa Allah semoga bermanfaat. Jika anda ada sebarang pertanyaan dan soalan boleh ajukan di ruangan komen.

Sekian

Sumber : JepunTekno