Memahami Link Dengan Berbagai Variasinya

Dalam arti sempit link adalah url yang secara visual nampak sebagai kata / kalimat, gambar atau url dari link itu sendiri yang bila di klik akan menuju ke url yang dituju.

Css link dapat dipadukan dengan berbagai variasi / property misalnya color, background-color, text-decoration, border dan lain sebagainya.

Tampilan link secara umum dibedakan menjadi 4 (empat) tampilan:
a:link (Tampilan link sebelum dikunjungi)
a:visited (Tampilan link setelah dikunjungi)
a:hover (Tampilan link saat dikunjungi)
a:active (Tampilan link saat di klik - ini jarang digunakan)

Dan penulisannya harus berurutan mulai dari a:link, a:visited, a:hover kemudian a:active.

Contoh Penulisan Css Link

Misalnya kita akan merubah tampilan link Judul posting. Maka kita cari dulu selector judul posting, pada blogspot judul posting selector nya adalah h3.post-title.  Jadi penulisan Css link nya adalah:

/*Css Tampilan Link-1*/
h3.post-title a:link {
  color: #05A2EB;
  text-decoration: none;
  }
h3.post-title a:visited {
  color: #000;
  text-decoration: none;
  }
h3.post-title a:hover {
  color: #DB4702;
  text-decoration: underline;
  }

/*Css Tampilan Link-2*/
h3.post-title a:link, a:visited {
  color: #05A2EB;
  text-decoration: none;
  }
h3.post-title a:hover {
  color: #DB4702;
  text-decoration: none;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 3px;
  background: #FBD8C8;
  }

/*Css Tampilan Link-3*/
h3.post-title a {
  color: #05A2EB;
  text-decoration: none;
  }

Dibawah ini terlihat tampilan link yang berbeda - beda silahkan arahkan cursor pada link dan klik serta lihat perbedaannya.

Tampilan Link-1: Berbeda Sebelum, Sewaktu Dan Setelah Dikunjungi

Link yang berada pada Judul di atas mempunyai tampilan yang berbeda sebelum dikunjungi, saat dikunjungi dan setelah dikunjungi.

Tampilan Link-2: Sama Sebelum Dan Setelah Dikunjungi, Tapi Berbeda Saat Dikunjungi

Link yang berada pada Judul di atas mempunyai tampilan yang sama pada waktu sebelum dikunjungi dan setelah dikunjungi. Tapi berbeda saat dikunjungi.

Tampilan Link-3: Sama Sebelum, Sewaktu Dan Setelah Dikunjungi

Link yang berada pada Judul di atas mempunyai tampilan yang sama baik pada waktu sebelum dikunjungi, saat dikunjungi dan setelah dikunjungi.

Bila ingin mencoba merubah penampilan link sesuai dengan keinginan, silahkan coba edit link pada demo berikut:

DEMO ☑