Cara Mengubah Warna Link di WordPress

0
31

Pada tutorial kali ini, kita akan mempelajari cara mengubah warna link di WordPress?

Mengubah warna link dapat memudahkan pengunjung untuk melakukan navigasi.

Mengapa Kita Mengubah Warna Link di WordPress?

Saat Anda menambahkan link di WordPress, tema secara otomatis menentukan warna link.

Terkadang pilihan warna default tema WordPress akan persis seperti yang Anda inginkan, tetapi di lain waktu Anda ingin mengubah tampilan link.

Misalnya, Anda mungkin ingin mengubah warna link agar sesuai dengan merek atau logo bisnis Anda. Atau, Anda mungkin ingin meningkatkan kontras warna untuk meningkatkan aksesibilitas web bagi pembaca dengan penglihatan terbatas.

Beberapa tema memungkinkan Anda untuk mengubah warna link langsung dari panel tema atau penyesuai tema WordPress, jadi pastikan untuk memeriksa dokumentasi tema sebelum mengubah warna link dengan CSS.

Bila tertarik, Anda bisa belajar CSS di sini.

Karena itu, mari kita lihat beberapa cara untuk mengubah warna link di web WordPress Anda.

Salah satu cara untuk mengubah warna link di WordPress adalah dengan menambahkan kode CSS khusus.

Hal pertama yang perlu Anda lakukan adalah masuk ke menu dashboard admin WordPress dan pergi ke Tampilan » Kostumasi lalu klik pilihan menu ‘CSS Tambahan’.

Akan tampil layar untuk menambahkan kode CSS khusus di sisi kiri halaman.

Silahkan tambahkan cuplikan kode CSS dari contoh di bawah ini ke bagian editor Anda.

Pertama, kita akan menyesuaikan warna link secara keseluruhan. Ini adalah warna yang akan dilihat pengunjung website jika mereka belum pernah mengklik link sebelumnya.

Anda dapat menggunakan kode CSS di bawah ini sebagai contoh.

a {
     color: #FFA500;
}

Ini akan mengubah warna link default menjadi oranye. Pastikan Anda mengubah kode warna #FFA500 menjadi warna yang ingin Anda gunakan.

Ubah Warna Link Ketika Kursor Diarahkan ke Link di WordPress

Berikutnya yang akan kita ubah adalah warna link hover. Ketika pengguna mengarahkan kursor ke link, maka link akan berubah warna untuk menarik perhatian mereka.

Anda dapat menggunakan kode CSS di bawah ini sebagai contoh.

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Kode di atas akan mengubah warna link menjadi merah dan memiliki garis bawah saat pengunjung mengarahkan kursor ke atasnya.

Pastikan untuk mengubah warna #FF0000 ke yang Anda inginkan.

Ubah Warna Link Setelah Link Dikunjungi di WordPress

Hal lain yang mungkin ingin Anda ubah adalah warna link setelah pengguna mengklik link. Ini dapat membantu pengunjung dengan mudah menavigasi blog WordPress Anda dan melihat link mana yang telah mereka klik.

Anda dapat menggunakan kode CSS di bawah ini untuk mengubah warna link yang dikunjungi.

a:visited {
     color: #0000FF;
}

Pastikan Anda mengubah warna biru #0000FF ke warna yang Anda pilih.

Berikut adalah bagaimana semua kode CSS di atas akan terlihat di dalam penyesuai WordPress.

Setelah Anda membuat perubahan, klik tombol ‘Terbitkan’ untuk membuat perubahan Anda aktif.

Kode CSS di atas akan mengubah warna semua link di situs Anda.

Jika Anda hanya ingin menyesuaikan link yang ada di posting dan halaman Anda, Anda dapat menggunakan contoh kode di bawah ini.

.entry-content a {
     color: #FFA500;
}
 
.entry-content a:hover {
     color: #FF0000;
     text-decoration: underline;
}
 
.entry-content a:visited {
     color: #0000FF;
}

Kode ini melakukan hal yang sama seperti contoh kode di atas, namun kode class .entry-content hanya menargetkan link dalam konten Anda.

Ubah Warna Link Navigasi Anda di WordPress

Satu style link terakhir yang juga dapat Anda sesuaikan adalah link menu navigasi.

Perubahan CSS akan diterapkan bahkan jika Anda memutuskan untuk mengubah tema WordPress Anda.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Simple Custom CSS and JS.

Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah aktivasi, cukup buka Custom CSS & JS »Add Custom CSS di panel admin WordPress Anda.

Di sini Anda dapat menambahkan kode CSS yang sama seperti di atas.

Setelah Anda selesai menambahkan kode, pastikan untuk mengklik tombol ‘Terbitkan’ atau ‘Perbarui’.

Semoga artikel ini membantu Anda mempelajari cara mengubah warna link di WordPress. Jika Anda tertarik, bisa membaca artikel Kategori vs Tag – Mana yang Terbaik Untuk SEO Website Anda ?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.