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 Dottedmasukan 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 Dashedmasukan 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 Solidmasukan 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 Groovemasukan 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 Insetmasukan 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 Ridgemasukan 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 Outsetmasukan 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 Kotakmasukan 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

SekianSumber : JepunTekno

---