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.


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

Post a Comment

12 Comments

  1. niceee. lpasni kalau nak buat tahu dah nak cri dkt blog mana. tenkiuu

    ReplyDelete
  2. Thanks sbb share. Semoga entry ni memberi manfaat buat yang lain :)

    Ika datang singgah sini https://ikashoid.blogspot.com/2019/09/temporary-mini-library-2019.html

    ReplyDelete
  3. thanks sharing.. hari tu sy ada juga nampak tutorial mcm nie tp tak ingat dah sepa yg share.. boleh lah bookmark .. juts in case nak edit blog..

    ReplyDelete
  4. terima kasih atas perkongsian. untuk highlighted content boleh guna box ni.

    ReplyDelete

The author will not be responsible for any comment left by the readers. Please comment using polite language. Thank you.