Cara Membuat Background Warna Gradient Keren di Blog

Hai sobat aans, terimakasih sudah mampir dan mudah-mudahan apa yang kalian perlukan dan cari dapat terselesaikan melalui postingan kali ini yang berkaitan dengan Cara Membuat Background Warna Gradient Keren di Blog.

Sesuai judulnya, saya ingin berbagi Cara Membuat Gradient Warna Background pada Blog agar terlihat lebih keren. Gradient warna atau bisa juga disebut dengan gradasi warna.

Bagi seorang blogger, tampilan blog merupakan hal yang penting karena dapat mempengaruhi visitor yang berkunjung ke blognya. Dengan tampilan Blog yang menarik, diharapkan pengunjung akan betah berlama-lama mengunjungi blog kita. Kita ketahui bahwa Template blogger yang disediakan sekarang baik itu yang gratisan hingga yang premium rata-rata hanya menampilkan warna yang terlalu monoton. Sehingga kita perlu mengopreknya alias memodifikasi agar sesuai dengan selera dan keinginan kita.

Untuk membuat gradient atau gradasi warna pada blog sih sebenarnya gampang - gampang susah ya, karena kamu harus tau terlebih dahulu code - code dasar yang berada di dalam template seperti code header, footer dan yang lainnya.

Gradasi warna (gradient color) adalah konsep penggabungan dua warna atau lebih menjadi satu karakter dengan transisi warna yang sangat lembut dan halus. Background gradasi warna ini nantinya bisa anda atur untuk elemen mana saja semau anda dengan cara menyisipkan beberapa kode ke dalam bagian CSS nya. Cara ini tidak akan membuat blog anda berat karena kita hanya menggunakan bantuan kode CSS untuk mengaturnya.

Menambahkan Efek Gradasi Warna di Blog

1. Buka akun blogger anda. 

2. Pilih menu thema kemudian klik edit html. 

3. Cari kode script background dengan menekan tombol Ctrl + F

4. Nah maka akan muncul lebih dari satu script background  yang anda temukan disitu. Silahkan pilih apakah anda ingin mengubah warna background header, sidebar, post body atau yang lainnya.

5. Gunakan kode berikut ini untuk menambahkan efek gradasi warnanya:

background:linear-gradient(#0a3e3f,  #0c4d4f, #056a6d, #068488)

Keterangan: 

• kode-kode warna di atas silahkan ganti dan sesuaikan dengan warna-warna pilihan anda. 
• Jumlah warna bebas untuk anda tambah atau kurangi, minimal dua warna. 

Untuk menambahkan efek warna gradient pada area atau elemen tertentu di blog, sisipkan kode tersebut pada bagian CSS nya. 

Sebagai contoh misalkan anda ingin mengaturnya untuk background area footer, silahkan cari kode CSS footer template blog anda. Kalau sudah ketemu, hapus CSS backgroundnya dan gantikan dengan kode di atas sehingga setelah disisipkan hasilnya menjadi seperti berikut ini:

#footer-wrapper {background:linear-gradient(#0a3e3f,  #0c4d4f, #056a6d, #068488); ..... ....} 

Kode di atas akan membuat warna gradasi dari atas ke bawah. Jika anda ingin warna gradasi ke arah samping, silahkan tambahkan 'to right' atau 'to left' pada kode di atas sehingga menjadi seperti berikut ini:

#footer-wrapper {background:linear-gradient(to right, #0a3e3f,  #0c4d4f, #056a6d, #068488); ..... .....} 

 Atau

#footer-wrapper {background:linear-gradient(to left, #0a3e3f,  #0c4d4f, #056a6d, #068488); ..... .....} 

6. Atau gantilah sript backgroud tadi dengan script yang ada di bawah ini:

background:#696969;

background:-moz-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);

background:-webkit-linear-gradient(left,#696969 0,#000000 80%,#800000 100%);

background:linear-gradient(to right,#696969 0,#000000 80%,#800000 100%);

Note : Untuk mengedit gradasi warna bisa anda lakukan dengan mengubah tulisan berwarna merah di atas dengan kode warna yang anda inginkan sesuai selera anda. Untuk daftar script kode warna HTML sendiri bisa anda lihat di google karena sudah banyak yang menshare. Untuk mengubah rentang jarak warna gradasi daru satu warna ke warna lain bisa anda lakukan dengan mengubah tulisan berwarna biru. Sesuaikan dengan selera anda warna mana yang ingin anda tampilkan lebih dominan agar terlihat menarik dari jangka 0% hingga 100%.

7. Simpan template kembali. 

Kode warna lainnya dapat kalian lihat di sini https://www.w3schools.com/colors/colors_picker.asp

Coba lihat bagaimana hasilnya, keren bukan?. Anda juga bisa menambahkan warna gradasi tersebut pada bagian-bagian lainnya agar blog anda semakin cantik dan menarik. Demikian, semoga bermanfaat.

Source:
https://www.blogotech.net/2018/07/cara-membuat-gradasi-warna-pada.html
https://santossalam.blogspot.com/2021/12/cara-membuat-background-warna-gradient.html
https://kompaseo.blogspot.com/2019/07/cara-membuat-background-warna-gradasi.html