Cara Membuat Efek Warna Gradien Animasi Di Blog

Cara Membuat Efek Warna Gradien Animasi Di Blog - Menambahkan warna gradien animasi pada blog ini dapat memperbagus tampilan blog kalian, yang semula tampilannya biasa saja setelah menggunakan warna gradien animasi maka blog kalian akan tampil luar biasa kerennya.
Efek warna Gradien (color gradient) ini menggunakan bantuan kode CSS yang pastinya tidak akan membuat blog Anda berat, kode css ini memang di khususkan untuk mendesain sebuah tampilan halaman situs web agar terlihat lebih cantik dan bagus. Lanjut saja kalian simak tutorial membuat warna gradien animasinya berikut ini.

Pertama
Login Blogger > Tema > Edit HTML > Cari kode ]]></b:skin> > Lalu Masukkan kode bagian yang ingin di berikan warna gradien animasi tepat diatas kode ]]></bskin>. Contoh : #header-wrapper

Kedua
Copy lalu paste kode di bawah ini tepat di samping kode yang baru kita tambahkan tadi yaitu #header-wrapper. Contoh : #header-wrapper Kode di bawah ini.

Kode CSS Gradien Animasi

{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%}}

Ketiga
Maka Kodenya akan menjadi seperti ini.

Hasil Kode CSS Gradien Animasi

#header-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%}}

Keempat
Save/Simpan > Refresh > Buka Blog > Done.

kode diatas hanya merubah warna Gradien Animasi pada bagian Header atau pada bagia menu navigasi, jika ingin merubah Warna Gradien di bagian lain silahkan masukkan nama bagian yang ingin diberi Warna Gradien Animasi.

Kode ID dan Class yang digunakan pada umumnya sebagai berikut:

.post h1 {kode css} ini untuk judul postingan dengan tag heading h1.

.post h2 {kode css} ini untuk judul postingan dengan tag heading h1.

.sidebar-wrapper h4 {kode css} ini untuk judul widget dengan tag heading h4.

.sidebar-wrapper h3 {kode css} ini untuk judul widget dengan tag heading h3.

#header-container {kode css} atau #header-wrapper {kode css} ini untuk menu navigasi.

#footer {kode css} atau #footer-container {kode css} ini untuk footer.

#back-to-top {kode css} ini untuk tombol kembali ke atas atau back to top

Catatan:

Mungkin bagian-bagian kode id dan class pada template yang Anda gunakan berbeda, untuk mengetahuinya silahkan gunakan inspect element, caranya klik pada bagian tertentu yang ingin Anda ketahui id atau classnya kemudian klik inspect.

Itulah artikel mengenai cara membuat efek gradasi warna pada blog, semoga bermanfaat.

Berbagi :