-->

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.

Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Show comments
    Hide comments

    4 Komentar

    1. membuatnya jadi relatif position gimana?

      BalasHapus
      Balasan
      1. Apakah ada masalah atau eror ?

        Hapus
      2. tidak gan, hnya ingin tampilannya menyesuaikan

        Hapus
      3. 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

        Hapus
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!