Cara Membuat Animasi Gradient Color Di Blog

Rian
Rian
Cara Membuat Animasi Gradient Color Di Blog
Gradient Color adalah sebuah warna yang dimana warna tersebut terdapat bermacam macam warna yang dapat disatukan dengan warna lainnya, Seperti contohnya pelangi yang memiliki warna berbeda beda. Selain itu juga sobat bisa menggunakan warna gradient ini untuk memperindah warna tampilan pada blog sobat dengan tambahan animasi agar tampilan seperti berubah ubah.

Tampilan Graient Color ini memang sempat lagi Trending banget dikalangan blogger sempat waktu saya share diblog yang dulu dan banyak diminati. Sobat juga bisa menggunakan Animasi Gradient Color ini untuk berbagai template lain, tentu saja sobat harus paham dalam penerapanya dengan begitu bisa dipakai di semua template.

Cara Membuat Animasi Gradient Color Di Blog


1. Buka Blogger > Klik Tema > Klik tombol Edit HTML > kemudian tambahkan kode dibawah ini sebelum ]]></b:skin> atau </style>

#header-wrapper, #navigasi-wrapper{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
2. Untuk menerapkan tampilan gradient sobat harus memangil kode yang akan dibuat gradient color.

Contoh seperti ini:

#demo{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Kode #demo diatas adalah yang akan dipakai menjadi gradient color tentu saja bisa digunakan lebih dari satu kode.

3. Simpan Tema dan lihat hasilnya


Tampilan gradient color tersebut bisa digunakan di header blog maupun navigasi blog yang pasti seterah sobat mau dipasang dimana saja. Bagaimana sekarang sob, tampilan blognya pasti sudah bagus dengan tampilan Animasi Gradient Color. Mungkin sekian artikel tentang Cara Membuat Animasi Gradient Di Blog dan semoga artikel ini sangat bermanfaat bagi sobat semua.

Comments : Cara Membuat Animasi Gradient Color Di Blog