Cara Mengubah Warna Link
Tutorial kali ini saya akan membahas tentang cara mengubah warna pada link. Sebenarnya mengubah warna link pada template baru, tentunya bukan masalah besar, karena fasilitas untuk merubah warna dan huruf sudah di sediakan. Tetapi pada template klasik, untuk merubah warna link, anda harus merubah kode-kode yang ada pada kode template anda. Nah kita langsung aja ke tutorialnya :
1. Merubah Warna Link di CSS
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan kumpulan kode-kode yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. untuk proses penggantian warna link melalui CSS saya akan jabarkan sedikit pembahasan berikut.
Umumnya kode link CSS ditulis seperti-di bawah ini :
a { color: #3333FF; text-decoration: underline; }
a:hover { color: #000066; text-decoration: underline; }
a:visited { color: #663366; text-decoration: underline; }
Keterangan :
a { color: #3333FF; text-decoration: underline; } = Warna sebuah link biru dan bergaris bawah (#3333FF adalah warna link sedangkan underline adalah garis bawah
a:hover { color: #000066; text-decoration: underline; } = Sebuah link apabila di sorot oleh cursor akan berubah warna menjadi biru tua dan bergaris bawah
a:visited { color: #663366; text-decoration: underline; } = Sebuah link apabila pernah di klik oleh sebuah komputer yang sama akan berwarna ungu dan bergaris bawah
Kesimpulan :
kesimpulanya adalah yang menentukan warna dari sebuah link yaitu pada kode
a { color: #3333FF; text-decoration:underline; }
dan yang harus diganti adalah kode #3333FF, gantilah kode tersebut dengan kode warna yang kalian inginkan.
gampangnya begini :
a = link keseluruhan
a:hover = link yang apabila disorot oleh cursor mouse
a:visited = link yang sudah pernah kalian buka
a { color: #3333FF; text-decoration: underline; }
a:hover { color: #000066; text-decoration: underline; }
a:visited { color: #663366; text-decoration: underline; }
Keterangan :
a { color: #3333FF; text-decoration: underline; } = Warna sebuah link biru dan bergaris bawah (#3333FF adalah warna link sedangkan underline adalah garis bawah
a:hover { color: #000066; text-decoration: underline; } = Sebuah link apabila di sorot oleh cursor akan berubah warna menjadi biru tua dan bergaris bawah
a:visited { color: #663366; text-decoration: underline; } = Sebuah link apabila pernah di klik oleh sebuah komputer yang sama akan berwarna ungu dan bergaris bawah
Kesimpulan :
kesimpulanya adalah yang menentukan warna dari sebuah link yaitu pada kode
a { color: #3333FF; text-decoration:underline; }
dan yang harus diganti adalah kode #3333FF, gantilah kode tersebut dengan kode warna yang kalian inginkan.
gampangnya begini :
a = link keseluruhan
a:hover = link yang apabila disorot oleh cursor mouse
a:visited = link yang sudah pernah kalian buka
2. Merubah Warna Link di HTML
Dalam sebuah web / blog pasti adalah yang namanya HTML, nah bagi kalian yang ingin memberikan warna di html agar terlihat oleh kita.
<a href="https://www.arifnurindra.com">Contoh Link Warna</a>
<a href="https://www.arifnurindra.com">Contoh Link Warna</a>
nah, sudah jelas kan? jika kode "a" akan dipanggil pada penulisan html, maka secara otomatis tulisan "Contoh Link Warna" akan berubah menjadi warna #3333FF.
Kesimpulan akhir kode yang dapat saya uraikan adalah seperti ini
Kode untuk File Style.CSS :
a { color: #3333FF; text-decoration:underline; }
a:hover { color: #000066; text-decoration:underline; }
a:visited { color: #663366; text-decoration:underline; }
Kode untuk File Index.HTML :
<html>
<head>
<title>Contoh Link Warna</title>
<link rel="stylesheet" type="text/css" href="style.CSS">
</head>
<body>
<a href="https://www.arifnurindra.com">Contoh Link Warna</a>
</body>
</html>
Bagaimana? pusing? atau sudah paham? jika ada pertanyaan jangan sungkan untuk berkomentar dibawah :) Semoga bermanfaat~ Terimakasih
<html>
<head>
<title>Contoh Link Warna</title>
<link rel="stylesheet" type="text/css" href="style.CSS">
</head>
<body>
<a href="https://www.arifnurindra.com">Contoh Link Warna</a>
</body>
</html>
Bagaimana? pusing? atau sudah paham? jika ada pertanyaan jangan sungkan untuk berkomentar dibawah :) Semoga bermanfaat~ Terimakasih
kok gak bisa ya gan....tlg bisa kasih contoh cara nempel link nya gan terimakasih
ReplyDeletemaaf lama sekali jarang tengok blog, hehe.. sudah saya perbarui postingan ini :) terimakasih sudah mampir
Delete