4hmad Tutorial

Cara Membuat Gradient Color Di Header Dengan CSS

Hai, pada tutorial ini saya membagikan tentang membuat warna warni (gradient) pada template, karena banyak sekali para blogger sekarang menggunakan Gradien Color, terutama di header, footer dan lain lain. Tentu bagi yang belum paham atau awam pasti sulit untuk menerapkan CSS nya. Sebenarnya Gradient Color menggunakan Animation.

CSS yang dimana setiap warna akan berubah tentu saja kodenya mudah di ingat bila sering dipelajari.
Untuk menerapkan Gradient Color pada blog kalian sangatlah mudah, pastikan jangan sampai menumpuk antara Background utama dengan Background warna warni (Gradient), karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian header pastikan kalian hapus CSS Background pada header dulu. Baru kalian pasang Gradient Color.

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

Cara Penerapan Gradien Color

Silahkan 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 #header-wrapper / #header (setiap template berbeda beda), lalu hapus kode Background nya seperti dibawah ini

#header-wrapper {background: #000; Pastekan di sini (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)

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

Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>

#header-container, #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 merah samakan dengan kode header, misal #header-wrapper atau #header

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

Keterangan : Pada kode diatas hapus bagian Background yang sudah saya terangkan

Pemanggilan kode

Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kalian tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode yang terahir, yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #00000 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

Source: Kangian.com

Terimakasih untuk kangian.com karena saya sudah diperblehkan merewrite artikelnya.