VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Cara Membuat Animasi Gradient Color di Blogger dengan CSS

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

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
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. 
    Cara Membuat Animasi Gradient Color di Blogger dengan CSS
    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
    Cara Membuat Animasi Gradient Color di Blogger dengan CSS
    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.
    Cara Membuat Animasi Gradient Color di Blogger dengan CSS
    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
    Cara Membuat Animasi Gradient Color di Blogger dengan CSS
    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>
    Cara Membuat Animasi Gradient Color di Blogger dengan CSS
    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

4 komentar

  • MARGA TOMSIO
    MARGA TOMSIO
    September 20, 2019
    membuatnya jadi relatif position gimana?
    • MARGA TOMSIO
      Kurniawan
      September 23, 2019
      Apakah ada masalah atau eror ?
    • MARGA TOMSIO
      Unknown
      September 23, 2019
      tidak gan, hnya ingin tampilannya menyesuaikan
    • MARGA TOMSIO
      Kurniawan
      September 24, 2019
      oh gtu, ada kode tambahan dan perlu sedikit di rubah agar responsive di semua layar.. coba mas cek dengan responsinator. pada ukuran brp yang tampillanya kurang pas
    Reply