Cara Mudah Custom Tag di WordPress Agar Lebih Menarik

Ingin tampilan tags di blog WordPress kamu terlihat lebih rapi dan modern? Secara default, tampilan tag WordPress memang sederhana dan kurang menonjol. Padahal, tag berperan besar untuk internal linking, SEO, dan memudahkan pembaca menemukan topik serupa.

Pada artikel ini, kita akan membahas cara membuat tampilan tag menjadi lebih menarik menggunakan custom CSS, mulai dari membuat warna background, menambahkan efek hover underline, hingga bentuk rounded yang terlihat profesional.

Kenapa Perlu Custom Tags di WordPress?

Dengan desain tag yang lebih eye-catching:

• Pembaca mudah membaca struktur konten.

• Tag menjadi elemen visual yang mempercantik blog.

• Bounce rate menurun karena internal link lebih menarik diklik.

• Meningkatkan SEO on-page (Google suka navigasi yang jelas).

Di Mana Meletakkan Custom CSS-nya?

Kamu bisa meletakkan CSS pada:

1. Appearance → Customize → Additional CSS (Cara paling aman)

2. Atau Style.css child theme (Kalau kamu pakai child theme)

3. Atau lewat plugin “Simple Custom CSS”

Saran terbaik:
Letakkan di Customize → Additional CSS, karena cepat dan tidak hilang saat update theme.

CSS Custom TAGS yang Bisa Kamu Gunakan

Berikut contoh CSS final yang kemarin kamu pakaigaya modern, bersih, dan sangat readable.

1. Style Dasar (Rounded, Clean, Rapi)

.post-tags a {
  display: inline-block;
  padding: 6px 12px;
  background: #f1f5f9;
  color: #334155;
  margin: 4px;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition: all .25s ease;
}

2. Efek Hover Underline Elegan

.post-tags a:hover {
  background: #e2e8f0;
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

3. Style Khusus untuk Dark Mode (Opsional)

Jika WordPress kamu ada dark-mode:

body.dark-mode .post-tags a {
  background: #1e293b;
  color: #e2e8f0;
}
body.dark-mode .post-tags a:hover {
  background: #475569;
  color: #fff;
  text-decoration: underline;
}

Hasil yang Akan Kamu Dapatkan

Dengan kode di atas:

• Tag terlihat modern & minimalis

• Ada efek hover underline yang halus (bukan garis bawaan browser)

• Warna background soft

• Sudut rounded

• Tetap responsif di mobile

Cocok untuk blog personal, blog teknologi, lifestyle, hingga blog profesional.

Cara Memastikan Style Tag Berfungsi

Jika setelah menambahkan CSS tampilannya belum berubah:

Pastikan theme kamu menggunakan class HTML .post-tags
Jika berbeda, ganti selector dengan class yang ada di theme kamu, misalnya:

• .tags-links a

• .entry-tags a

• .tagcloud a

• .post-meta .tags a

Tips Tambahan untuk SEO

• Gunakan tag secukupnya (3–6 per artikel).

• Jangan bikin tag terlalu mirip (contoh: “tips parenting” dan “parenting tips”).

• Gunakan nama tag yang benar-benar mewakili topik artikel.

Dengan tampilan tag yang cantik, pembaca akan lebih mudah menelusuri artikel kamu, sementara Google melihat struktur internal link yang rapi.