Tutorial #7 – Cara Membuat Kotak Border Teks (Text Box) Dalam WordPress

Di dalam post WP.com, kita juga boleh membuat kotak border teks untuk tujuan menarik perhatian atau memberitahu info yang penting dalam sesuatu post artikel anda.

Terdapat dua cara untuk membuat border teks iaitu dengan plugin shortcodes bagi wordpress berbayar dan menggunakan kod HTML bagi semua platform WordPress.

Di dalam tutorial ini saya akan menyentuh bahagian asas kod HTML untuk membuat kotak border teks. Ia agak ringkas dan mudah difahami. Asasnya tidak memerlukan kod yang panjang untuk ‘style’ asas.

Saya anggap anda sudah sedikit tahu di mana hendak melakukan editing Kod HTML di dalam pos WP.com. Berikut saya berikan kod asas untuk membuat kotak border teks.

<p style="border:1px solid;padding:10px; text-align:center">
ISI TEKS DISINI
</p>

 

Di mana;

Kod HTML / TagsMaksud Penggunaan
<p>Pembuka new paragraph kod HTML
</p>Penutup new paragraph kod HTML
stylememberitahu ciri-ciri tertentu
solidjenis garisan border
border:1pxTebal garisan border setebal 1 piksel
padding:10pxlebar kawasan kosong antara border dan teks adalah 10 piksel
ISI TEKS DISINIperkataan atau ayat yang akan berada di dalam kotak

Kaedah:

‘Copy’ dan ‘Paste’kan kod HTML di atas ke dalam ‘Text’ editor anda dan lihat hasilnya pada tab ‘Visual’. Hasilnya normal sebegini:

ISI TEKS DISINI

 

Alternatif:

Anda boleh ubah saiz piksel (px) pada border dan padding. Anda juga boleh ubah perkataan “solid” kepada:

  • double
  • dashed
  • dotted
  • outset
  • inset
  • groove
  • ridge

Contoh:

Solid Border = 2px

Double line Border = 3px

Dashed Border = 1px

 

Dotted Border = 3px</p

Outset Border = 6px

Inset Border = 6px

Groove Border = 8px

Ridge Border = 8px

Alternatif Tambahan:

  1. Untuk adjust <ISIKAN TEKS DI SINI> supaya berada di tengah-tengah kotak border, tambahkan kod “text-align:center” ke dalam ‘style’ seperti berikut:
<p style=”border:1px solid;padding:10px; text-align:center”>
ISI TEKS DISINI
</p>

 

  1. Untuk isikan warna di dalam kotak border teks, tambahkan kod “background-color:HEX”  ke dalam ciri ‘style’ seperti berikut:
<p style=”border:1px solid;padding:10px; text-align:center; background-color:HEX”>
ISI TEKS DISINI
</p>

 

Gantikan ‘HEX’ dengan warna-warna berikut:

  • red
  • yellow
  • blue(warna standard)
  • atau
  • #FFF700 (kod warna kuning dalam color picker)

**Sila  pilih kod warna kesukaan anda di Color Picker‘ 

Sekian, diharap tutorial di atas banyak membantu anda dan menyemai minat anda untuk belajar kod HTML.

Mudahnya Membina Blog‘ by Masterji

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.