Cara Membuat Background Warna Gradasi Animasi Di Platfrom Blogger

Assalamu’alaikum Warahmatullahi Wabarakaatuh,

Halo Sobat Mas Rizky, Pada kali ini mas rizky akan membahas tentang salah satu trik CSS yang sangat mengagumkan sekali, yaitu Cara Membuat Background Warna Gradasi Animasi Di Platfrom Blogger atau sering kita sebut dengan gradient animasi. 

Gradasi dalam CSS terbagi menjadi dua, yaitu gradasi statis atau diam, dan gradasi dinamis atau dapat bergerak. Tetapi dalam Artikel kali ini, kita akan membahas warna gradasi animasi dulu saja ya.

Jika sobat ingin mengetahui tentang cara membuat gradasi statis pada blog / website, sobat tentu dapat membaca postingan yang telah saya buat dengan judul Cara Membuat Gradasi Warna di Blogger Support Semua Browser.

Sebelum kita memulai pada tutorial cara membuat color background gradient ini, kita akan terlebih dahulu mengetahui sebab kanapa akhir akhir ini banyak sekali pemilik blog me-redesign ulang, blog mereka dengan warna warni gradasi pada background template blog mereka. Berikut penjelasanya…

Awal Mula Fenomena Color Gradient di Berbagai Blogger / Website

Akhir akhir ini sangat buming sekali teknik css color gradient ini, banyak pemilik blog secara serentak me-redesign ulang pada tampilan warna background tamplate mereka menjadi warna gradasi. Hal ini tentunya membuat trend style blog juga ikut berubah ya bro, yang pada awalnya mereka mamakai warna statis, kini mereka semua merubah menjadi warna dinamis dengan animasi color gradient.

Fenomena ini membuat banyak sekali kita temukan berbagai baik blogger ataupun yang sering disebut website yang membahas topik tentang cara atau tutorial membuat background gradient pada blogger / website.

Sebelum teknik color gradient ini buming, ada juga teknik css yang sudah buming terlebih dahulu. Tepatnya pada akhir tahun 2023 kemaren, tentu para developer blog seluruh dunia secara serentak merubah tampilan website mereka menjadi tampilan material design seperti tampilan baru milik Google pada awal tahun 2019. Hal tentunya menjadi style trend template blogger pada tahun tersebut menjadi material design hingga saat ini di tahun 2024.

Setelah fenomena material design tersebut sedikit mereda atau turun, muncul lagi teknik css yang tak kalah bumming, yaitu membuat background color gradient. Entah siapa yang melopori teknik gradient ini. Yang pasti teknik ini menyebar begitu saja dengan cepat.

Pada teknik warna gradasi ini dinilai sangat efektif untuk mempercantik tampilan blog tanpa membuat blog sobat menjadi berat, mungkin hanya menambah beban kecil pada proses rendering. Namun hal tersebut itu tidak akan membuat kualitas kecepatan blog kamu menjadi menurun ya bro. Teknik ini warna gradasi bergerak atau disebut dengan nama animasi pada kali ini tidak memakai javascript sama sekali, alias sangat murni terciptanya hanya menggunakan dari css.

Cara Membuat Background Warna Gradasi Animasi Di Platfrom Blogger

Cara #1
Buka menu Theme >> Edit HTML, sehingga akan keluar mode edit HTML.

Cara #2
Tentukan bagian mana yang ingin sobat rubah warna background nya menjadi warna gradient. Disini mimin ambil contoh akan mengubah warna background pada bagian Header saja.

Cara #3
Cari kode CSS yang menunjukkan pada section header. Untuk mempermudah sobat dalam pencarian, gunakan tools untuk membantu pencarian sobat dengan menekan tombol ctrl + f.

Masukan kata Header, maka sobat akan diarahkan ke css dari header, cari kode css seperti dibawah ini ya bro

#header-wrapper {background:#fff; width:100%; height:auto;}

Kode tersebut tentunya terletak diantara <b:skin> dan </b:skin> atau <style> dan </style>.
Dan kode tersebut biasanya diikuti dengan kata wrapper jadi jangan salah ya bro. Cari perlahan – lahan hingga ketemu.

Cara #4
Setelah kode css dari section header tersebut sudah sobat temukan, silahkan ganti kode background:#fff dengan kode CSS gradient bergerak dibawah ini ya bro.

background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);
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%}

Sehingga susunan kode tersebut akan menjadi seperti ini ya bro jadi jangan sampai salah.

#header-wrapper {background:linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);
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%};
width:100%; height:auto;}

Cara #5
Kemudian sobat tinggal save perubahan tema tersebut, dan lihat hasilnya.

Kamu juga dapat mengganti warna gradasi tersebut dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 sesuka hati kamu ya bro.

Tips Memasang Warna Gradasi Bergerak Dengan Mudah.

Sobatku, untuk pemasangan kode warna gradasi animasi tersebut alangkah baiknya jika diletakkan pada section yang memiliki width dan height tidak terlalu besar ya. Seperti halnya pada bagian section navbar, footer, sidenav atau yang lainnya ya sob.

Jangan memakai teknik ini untuk background bodywebsite. Karena hal tersebut akan membuat proses rendering html pastinya sobat terasa lebih berat dan sangat tidak efektif bagi pengunjung blog atau website sobat, terutama bagi para pembaca yang berkunjung melalui handpone dengan spek kentang atau minim.

Sobatku menggunakan teknik gradasi seperti cara ini juga ada kelemahannya, yaitu pada platform browser tertentu, biasanya browser old teknik gradasi ini tidak akan bisa tampil sama sekali, seperti pada IE, teknik ini akan tampil seperti putih tanpa adanya warna gradasi yang tadi sobat setting.

Namun, sobat tenang saja, zaman sekarang browser internet explorer (IE) sudah banyak yang meninggalkanya dan sekarang beralih ke browser yang lebih canggih, yang mana sudah dapat menampilkan hasil rendering dari HTML5 dan CSS3.

Ternayata sudah mau isyak jadi untuk sementara cukup sampai disini dlu pembahasan teknik CSS membuat warna gradasi bergerak dengan judul Cara Membuat Background Warna Gradasi Animasi Di Platfrom Blogger, semoga apa yang saya sampaikan dipostingan kali ini dapat bermanfaat bagi sobat semua ya, tunggu artikel tips dan trik seputar blogger manarik lainya yang segera mimin buat, akhir kata, sekian terima kasih dan selamat mencoba, suksess selalu ya.