Cara Memasang Elements: Typography, Button, Boxes, dan Lainnya

Elements membantu menyusun artikel agar lebih jelas, menarik, dan mudah dipindai. Duniai Blog menyediakan elemen siap pakai melalui toolbar editor visual dan sintaks Markdown sederhana.

Cara memasang elemen

Masuk ke Dashboard → Artikel → Tulis artikel. Pada editor visual, gunakan tombol Tautan, Tombol, Box, atau Kode. Anda juga dapat menekan tombol Markdown, menempelkan sintaks dari panduan ini, lalu kembali ke Editor visual untuk melihat hasilnya.

Heading dan typography

Gunakan heading untuk membagi topik. Tulis ## Judul bagian untuk heading tingkat dua dan ### Judul kecil untuk heading tingkat tiga.

``text
teks tebal, teks miring, teks dicoret, teks disorot, kode inline`, Ctrl+S, dan Baru

```

Hasilnya: teks tebal, teks miring, teks dicoret, teks disorot, kode inline, tombol keyboard Ctrl+S, dan label Baru.

Tautan

Tautan internal dapat memakai alamat yang dimulai dengan garis miring. Tautan luar wajib menggunakan HTTPS.

```text
Buka beranda

```

Contoh: Buka beranda atau Kunjungi Cloudflare.

Button

Format tombol terdiri dari teks, URL, dan gaya. Gaya yang tersedia ialah primary, secondary, outline, dan danger.

```text
[button text="Buka beranda" url="/" style="primary"]

```

Gunakan gaya bahaya hanya untuk tindakan yang berisiko, misalnya menghapus data. Label tombol sebaiknya pendek dan menjelaskan tujuannya.

Boxes

Kotak pesan tersedia dalam empat jenis: INFO, SUCCESS, WARNING, dan DANGER. Baris isi diawali tanda >.

```text
> [!INFO] Informasi
> Isi pesan untuk pembaca.

```

Daftar

Daftar berpoin memakai tanda minus, sedangkan daftar langkah memakai angka.

```text
- Elemen pertama
- Elemen kedua

```

• Buat isi artikel.
• Tambahkan elemen yang diperlukan.
• Periksa melalui pratinjau.

```text
1. Buka dashboard.
2. Pilih artikel.
3. Simpan atau terbitkan.

```

1. Buka dashboard.
2. Pilih artikel.
3. Simpan atau terbitkan.

Blok kode

Blok kode memakai tiga tanda backtick pada awal dan akhir. Nama bahasa seperti html, css, atau javascript boleh ditulis setelah tanda pembuka.

```html
<a class="contoh" href="/">Buka halaman</a>

```

Gambar dan garis pemisah

Format gambar memakai teks alternatif dan URL HTTPS.

```text
!Deskripsi gambar

```

Tiga tanda hubung pada satu baris membuat garis pemisah.

Saran penggunaan

Gunakan heading secara berurutan, pilih satu tombol utama per bagian, dan pakai box hanya untuk informasi yang memang perlu menonjol. Selalu isi deskripsi gambar, periksa tampilan seluler, lalu gunakan pratinjau sebelum menerbitkan artikel.