Membuat link berwarna pelangi cantik
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;4.Tekan pratinjau dulu dan simpan template.
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 comments for "Membuat link berwarna pelangi cantik"
Saat dicoba satu persatu ternyata tidak ada perubahan, ada solusi yang lain ? Thks
text-decoration: underline;
} <==== hapus dulu sobat