Kali ini saya ingin membagikan cara mengubah warna link pada blog anda dengan menggunakan CSS. Terbilang mudah dan cepat, tetapi sulit bagi yang masih awam.
Biasanya, bawaan tiap template memiliki warna link yang berbeda-beda. Ada yang hijau, kuning, merah, biru, dan sebagainya. Warna tersebut mengikuti warna dominan di template, misal warna dominan biru, maka warna link juga biru.
Adapun beberapa teman blogger saya yang masih awam sempat bertanya ke saya cara mengganti warna link di blognya, oleh karena itu saya membuat artikel ini.
Cara Mengubah Warna Link Pada Template Blogger Dengan CSS
Cara mengeditnya pun terbilang gampang, pertama sebelum mengedit, ada baiknya anda menghapus dulu semua CSS yang berhubungan dengan warna link sehingga tidak akan terjadi error. Hapus semua CSS yang berawalan seperti ini:
a:link { ..... }
a:visited { ..... }
a:hover { ..... }
a:active { ..... }
Setelah itu, mari kita lanjut ke caranya. Disini saya bagi 4 cara, yaitu mengubah warna link utama, link ketika hover, diklik, dan link yang sudah pernah dikunjungi. Untuk yang ingin lompat ke semuanya, silakan scroll kebawah.
1. Mengubah Warna Link Utama
Pertama, silakan anda buka Edit HTML, dan masukkan kode berikut tepat diatas /head.
<style>
a:link {
color: white;
}
</style>
Bisa dilihat pada kode yang saya mark kuning, ganti tulisan white dengan kode warna anda, misal blue, red, cyan, dan semacamnya. Atau anda juga bisa menggunakan kode warna berbentuk RGBA atau HEX yang bisa anda dapatkan disini: Flat UI Color Picker. Contoh hasilnya menjadi seperti ini (bila menggunakan kode HEX dari link diatas):
<style>
a:link {
color: #5C97BF;
}
</style>
Simpan template dan lihat hasilnya.
2. Mengubah Warna Link yang Sudah Pernah Dikunjungi
Maksudnya ialah bila anda sudah pernah mengklik suatu link, maka warna link tersebut akan berbeda dengan yang lainnya. Tujuannya supaya memudahkan pengunjung untuk memilah mana link yang sudah pernah ia kunjungi. Untuk membuatnya silakan masukkan kode ini dibawah kode pada cara pertama diatas:
<style>
a:visited {
color: kode-warna;
}
</style>
Simpan template dan lihat hasilnya. Ingat, masukkan dibawah kode yang sudah anda masukkan tadi pada cara pertama ya... Alias tepat diatas /head.
3. Mengubah Warna Link Ketika Kursor Diarahkan
Ketika kursor mouse kita diarahkan ke link tersebut, maka warnanya akan berubah. Biasanya menjadi seperti gelap. Caranya adalah dengan memasukkan kode berikut tepat dibawah kode yang anda dapat di langkah kedua diatas, alias tepat diatas /head:
<style>
a:hover {
color: kode-warna;
}
</style>
Simpan template anda, lalu cek lewat browser PC.
4. Mengubah Warna Link Ketika Diklik
Ketika anda mengklik linknya, maka warna link tersebut akan berubah. Silakan masukkan kode ini tepat diatas /head, atau dibawah kode pada langkah ketiga.
<style>
a:active {
color: kode-warna;
}
</style>
Keseluruhan Kode
Bila anda mengikuti semua langkah diatas, maka keseluruhan kode yang anda buat kurang lebih menjadi seperti ini:
<style>
a:link {
color: kode-warna;
}
a:visited {
color: kode-warna;
}
a:hover {
color: kode-warna;
}
a:active {
color: kode-warna;
}
</style>
Jangan ubah susunan kode diatas, karena dapat menyebabkan error. Susunannya harus a:link - a:visited - a:hover - a:active.
Bagaimana? Mudah saja bukan? Semoga warna link anda dapat berubah dengan sempurna.