Cara Membuat Judul Post Warna Pelangi pada Blog

Jika kita ingin mengedit judul post, link blog atau hover pada template blog,

kita harus nguprek css nya.

Kali ini saya ingin berbagi cara membuat judul post warna pelangi pada blog.



1. Tentunya login blog sobat dan menuju template edit html

2. cari kode .post h2  ,ini kode untuk judul postingan

3. Letakkan kode berikut di dalamnya

-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400);

Hasilnya ntar seperti ini

.post h2 {-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); font:18px Architects+Daughter;line-height:1.2em;margin:.25em 0 0;padding:0 0 4px;}

6. Save



Sobat dapat memodifikasi warna sesuai keingin. Pada tutorial saya kali ini hanya mencontohkan warna pelangi. Jika ada kode css lain yang lebih simple dari yang saya bikin, dapat di share melalui reply komentar.