Cara Membuat Background Gradasi Warna Pelangi
Cara Membuat Background Gradasi Warna Pelangi - Background gradasi adalah konsep untuk menggabungkan dua warna atau lebih menjadi satu karakter. biasanya penggunaan background gradasi atau gradient warna dengan animasi css digunakan untuk mempercantik tampilan website atau blog.
Pada kesempatan kali ini saya akan memberikan panduan tutorial cara membuat background gradasi warna pelangi, khususnya pada blog yang akan kita modifikasi tampilannya. Cara membuatnya tidak dikatakan susah tapi ikuti saja panduannya yang akan saya jelaskan lebih detail agar anda bisa mengerti cara membuatnya dan meletakkan kode di theme blog yang anda gunakan.
Disini akan saya jelaskan secara detail agar anda bisa memahaminya, karena ketika ingin membuat background gradien ini anda harus mengetahui posisi kode-kode yang akan kita pasang pada setiap template blog. cara ini bisa diterapkan ke semua platform blog, seperti blogger, wordpress, dan lain sebagainya. Cukup tambahkan kode ke tema pengaturan masing-masing. untuk itu mohon diperhatikan baik-baik agar tidak terjadi kesalahan.
Baca juga : Cara Mengedit Tulisan Berbayang di Judul Blog
Cara Membuat Background Gradasi Warna
Berikut ini adalah langkah-langkah Cara Membuat Background Gradasi Warna Pelangi :
1. Tambahkan CSS
Salah satu kunci utama yang harus kita lakukan adalah menambahkan kode css ke pengaturan tema. Kode css berfungsi untuk mengatur warna yang akan kita gunakan, yang nantinya akan digabungkan menjadi gradasi warna. Setelah itu pada bagian gradasi kita akan menambahkan sedikit animasi bergerak agar terlihat lebih menarik. Seperti biasa login ke blog, setelah itu di dashboard blogger pilih tema → sesuaikan → edit html.
Setelah itu cari kode ]]> </ b: skin> atau ketik saja kata kunci dengan menekan tombol ctrl+f, tulis b: skin lalu enter dan cari kodenya. Setelah itu kita akan menambahkan kode css di bawah ini salin dan paste kode tepat di atasnya.
2. Implementasi Blog
Implementasi Blog disini Anda hanya perlu menambahkan class codinganPelangi ke elemen yang diinginkan. berikut adalah contoh jika anda ingin membuat efek gradasi warna bergerak di header:
- Cari kode <div id='header'> di Edit Html template yang Anda gunakan.
- Tambahkan class, sehingga hasilnya menjadi <div id='header' class='codinglanPelangi'>
Contoh :
<!--SEBELUM-->
<div id='header'>
...
</div>
<!-- SESUDAH -->
<div id='header' class='codinglanPelangi'>
...
</div>
3. Tambah Kode Class
Jika sudah ada class, tambahkan di belakang class sebelumnya.
Contoh :
<!-- SEBELUM -->
<div id='header' class='header'>
...
</div>
<!-- SESUDAH -->
<div id='header' class='header codinglanPelangi'>
...
</div>
Sekarang coba anda cek dulu css #header atau .header untuk memastikan apakah ada value background atau tidak. karena jika demikian maka kode akan bentrok dan yang akan ditampilkan tetap css dari header yang sebelumnya.
Contoh seperti kode di bawah ini :
#header {
background: #ff000; /* bisa juga menggunakan property 'background-color' */
position: relative;
display: block
}
/* ATAU */
.header {
background: #ff000; /* bisa juga menggunakan property 'background-color' */
position: relative;
display: block
}
Pemberitahuan - Apabila jika terjadi hal seperti kode diatas, maka hapus property background atau background-color karena akan digantikan oleh class codingolanPelangi.
Setelah semua selesai dan pada saat Anda menyimpan / save template jika terjadi eror dengan informasi atau keterangan seperti ini The widget settings in widget with id <b>AdSense1</b> is not valid. An internal error occurred. Please try again. jangan khawatir itu hanya keterangan yang menyatakan Pengaturan widget di widget dengan id <b>AdSense1</b> tidak valid. Terjadi kesalahan internal. Tetapi dengan keterangan demikian sistem sudah secara otomatis menyimpan data kita. Setelah itu kembali ke dashboard blogger dan Anda bisa mengecek perubahan disana dan pilih lihat blog.
Nilai yang Dapat Diubah untuk Membuat Latar Belakang Gradasi
Nilai yang dapat diubahWarna gradien latar belakang dengan berbagai animasi yang bergerak diatur oleh css di properti latar belakang.
Berikut ini adalah beberapa Nilai yang Dapat Diubah untuk Membuat Latar Belakang Gradasi :
1. Jenis Gradasi
Ada dua jenis yang dapat digunakan, yaitu linear dan radient. nilai yang dibutuhkan adalah linear-gradient (seperti kode di atas) dan radial-gradient. Linear menciptakan efek bergradasi, sedangkan radient menciptakan efek melingkar dan elips. Disini saya tidak terlalu detail untuk menjelaskan tipe radial satu persatu. Karena dalam tutorial ini hanya fokus pada tipe linier. untuk itu saya sertakan perbedaannya agar lebih jelas dan dimengerti. contohnya seperti gambar dibawah ini.
2. Tingkat Kemiringan
Jika kita perhatikan warna-warna yang muncul dengan posisi agak miring. ini sengaja dilakukan agar bisa menciptakan efek yang lebih indah. Dalam contoh, kemiringannya adalah 45 derajat yang ditunjukkan dengan nilai 45deg.
3. Perpaduan Warna
Gradasi ini pada dasarnya adalah transisi warna yang sangat lembut dan halus. Oleh karena itu untuk membuat efek gradien dibutuhkan minimal 2 warna. contoh warna yang akan ditampilkan adalah # f22613, # f89406, # 26a65b, # 5868ec, # f54e80, # f7ca18, # d2527. Anda dapat menambah atau mengurangi jumlahnya, misalnya setidaknya dua warna atau anda dapat mengubah warnanya.
4. Animasi Bergerak
Mungkin ini bagian yang lebih keren dalam animasi sederhana diperlukan untuk membuat gradasi warna yang bergerak. Pada keterangan telah ditentukan oleh property seperti -webkit-animation, -moz-animation, dan animation. → wajib tulis semua agar mendukung banyak browser. dengan value → codinglanGradient 12s ease infinite anda cukup ubah kecepatan animasinya saja. seperti di value → 12s dan yang lainnya tidak usah. semakin kecil angkanya, maka semakin cepat gerakannya.
Kesimpulan
Dengan membuat Background Gradasi Warna Pelangi pada halaman website atau blog, anda dapat mempercantik tampilan halaman website atau blog yang anda sukai. Selain itu juga dapat mengasah kemampuan kita dalam mendesain halaman blog agar lebih unik dan menarik. Dengan begitu, anda bisa menambah wawasan tentang pemrograman seperti pada postingan kali ini yang membahas tentang membuat background gradasi warna pelangi dengan menambahkan kode css pada file xml pada template blog anda.
Penutup
Demikian posting kali tentang Cara Membuat Background Gradasi Warna Pelangi. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
So the tutorial how to make a rainbow color gradient background. If you review the explanation above, I can guarantee that you will find many concepts or ideas to be developed. Thank you for visiting this simple blog.
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
