Cara Membuat Animasi Gradient Color di Blogger dengan CSS- Hallo sahabat blogger, pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat animasi gradient color pada blog. banyak para bloger yang sudah menerapkan animasi gradient color ini pada blognya, entah itu pada Header, Sidebar atau bahkan Footer. pada tutorial kali ini saya hanya akan menerapkan animasi gradient color pada header blog, nah untuk sidebar dan footernya. saya akan buat di tutorial berikutnya.
Baca Juga : Cara Menampilkan Logo atau Icon Blog di Speed Dial Browser
Baca Juga : Cara Menampilkan Logo atau Icon Blog di Speed Dial Browser
Pada tutorial sebelumnya saya juga sudah membuat tutorial mengenai cara mengubah warna header blog menjadi gradient color. tapi itu berbeda dengan sekarang, karena kali ini gradient colornya di tambah dengan animasi. jadi makin keren dah blog anda kalo di pasang animasi gradient color ini.
 |
| Cara Membuat Animasi Gradient Color di Blogger dengan CSS |
Selain menambah tampilan blog anda lebih menarik, blog anda akan terlihat lebih keren dan mempunyai desain yang profesional. oke ktia langsung saja ke tutorial pemasangannya.
Berikut adalah Cara Membuat Animasi Gradient Color di Blogger dengan CSS
- Masuk terlebih dahulu ke akun Blogger anda dan masuk ke menu Dashboard
- Pilih Tema atau Tempate => Edit HTML
- Silahkan anda cari kode #header-container atau kode yang mirip dengan itu, biasanya setiap template berbeda.
Header-container - Setelah ketemu, silahkan hapus kode backgroundnya saja dan ganti dengan scirpt CSS dibawah ini
background: linear-gradient(-45deg, #12c2e9, #c471ed ,#f64f59 ,#aa4b6b);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%}}
- Contoh gambar penerapannya seperti ini
Kode Background - Selanjutnya silahkan anda cara kode #header-wrapper atau yang mirip dengan kode tersebut. kode #header-wrapper ini biasanya ada tepat di bawah kode #header-container. silahkan anda scroll ke bawah saja dan cari.
Header-wrapper - Kemudian anda hapus code #header-wrapper berserta kode di bawahnya (bisa anda perhatikan gambar di atas, hapus yang saya blok kotak warna merah) dan ganti dengan script CSS di bawah ini
#header-wrapper{background: linear-gradient(-45deg, #12c2e9, #c471ed ,#f64f59 ,#aa4b6b);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%}}
- Contoh penerapannya seperti ini
Header-wrapper - Sedikit tambahan dari saya, apabila anda tidak dapat menemukan scipt #header-wrapper pada template blognya. silahkan anda langsung saja cari kode ]]></b:skin> atau </style>
Header-wrapper up ]]></b:skin> - Silahkan copy script CSS tadi dan letakan di atas kode tersebut.
- Terakhir silahkan Simpan Tema atau Templatenya dan cek apakah sudah berhasil atau belum.
Jangan lupa jika anda ingin mengganti animasi warna gradientnya, silahkan anda ganti kode #12c2e9, #c471ed ,#f64f59 ,#aa4b6b dengan kode warna yang anda suka. sedikit bantuan jika anda perlu kumpulan kode warna, silahkan kunjungi Flat UI Color Picker.
Nah, mungkin itu saja tutorial kali ini mengenai Cara Membuat Animasi Gradient Color di Blogger dengan CSS. bagi anda yang memiliki pertanyaan atau request tutorial berikutnya. silahkan anda berkomentar di bawah postingan ini. semoga artikel ini bisa membantu anda dan bermanfaat.
4 komentar