Cara Membuat Gradient Color Pada Footer Template

Baca Juga

Cara Membuat Gradient Color Pada Footer Template

Hai, setelah kemarin saya posting membuat gradient color khususnya pada header, sekarang saya membagikan tutorial membuat gradient pada footer. Saya memakai template milik arlian, untuk template lain bisa menyesuaikan.

Ingat, pastikan jangan sampai menumpuk antara Background utama dengan Background Gradient karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian footer pastikan kalian hapus CSS Background pada footernya dulu. Baru kalian pasang Gradient Color.

Yah, langsung saja terjun ke langkah langkah membuat Gradient color pada header.

Cara Penerapan Gradien Color

• Masuk ke Dashboard Blog
• Setelah itu Klik Template / Tema 
• Klik Edit HTML

Kalian copy script di bawah

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

• Nah dibagian ini cari kode #footer-wrapper / #footer (setiap template berbeda beda), lalu hapus kode Background nya (saya warnai merah) seperti dibawah ini

#footer-wrapper {
 background: #000;  (ganti script yang saya warnai merah dengan script yang telah kalian copy tadi)
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

• Maka akan hasilnya jadi seperti ini (tanpa background). Lihat gambar di bawah agar lebih jelas

#footer-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%}}
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

• Jika sudah buat pemanggilan kode terlebih dahulu, misal #footer-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>. Lihat gambar di bawah agar lebih jelas

#footer-wrapper, #back-to-top{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%}}

Note: tulisan yang saya warnai kuning samakan dengan kode footer, misal #footer-wrapper atau #footer

• Lalu kalian Save / Simpan Template.
• Coba kamu lihat Tampilan nya pasti akan berubah warna
• Selesai

Lihat gambar di bawah agar lebih jelas

langkah 1

la

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #E224C3 dan ganti dengan warna yang kamu inginkan (misal #E73C7E)

Nah itulah cara untuk membuat gradien color di blog. Sampai bertemu di tutorial selanjutnya ya. Bye