Membuat link berwarna pelangi cantik

DEMO

Aku pernah memberikan tutorial cara membuat link berwarna efek pelangi, dan tutorial kali ini efek link pelangi-nya lebih soft hover cantik dengan memasukkan kode css ke dalam template. Tapi caranya mudah banget/nggak susah, contohnya seperti pada gambar di atas apabila cursor menyentuh link yang ada dalam blog akan berubah menjadi warna pelangi, agar lebih jelas tekan DEMO nya xD. Untuk membuat link berwarna pelangi cantik seperti pada demo di atas caranya:

1.Masuk Dashboard > Template > edit HTML

2.Tick Expand template widget dan tekan F3/CTRL + F dan cari kode:

a:hover {  (paling atas)

Kalau di bawah kode a:hover { ada kode berikut (contoh) hapus dulu:

color:#000000;
text-decoration: underline;
} 

3.Copy paste kode di bawah ini dan letakkan tepat di bawahnya:

-webkit-background-clip: text;
color: pink;
-webkit-transition: 1.0s;
-webkit-text-fill-color: transparent;
background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image:-webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:-o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

4.Tekan pratinjau dulu dan simpan template.

Share :