Pemilihan background warna yang tepat bisa menjadi salah satu daya tarik agar blog semakin disukai oleh para pengunjungnya. Selain satu warna standar, kita juga bisa menambahkan gabungan dari beberapa warna untuk background pada elemen tertentu agar tampilannya semakin keren dan menarik. Caranya yaitu dengan menambahkan efek gradasi warna pada elemen tersebut.
Gradasi warna (gradient color) adalah konsep penggabungan dua warna atau lebih menjadi satu karakter dengan transisi warna yang sangat lembut dan halus. Pemakaian warna gradient ini memang biasa kita temui pada suatu website atau blog untuk menciptakan efek warna yang keren dan cantik pada web atau blog tersebut.
Nah, pada artikel kali ini kita akan belajar bersama untuk menciptakan background warna gradient keren di blog. 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. 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); ..... .....}
4. Simpan template kembali.
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.
Labels:
Blogging
Thanks for reading Cara Membuat Background Warna Gradient Keren di Blog. Please share...!
0 Komentar untuk "Cara Membuat Background Warna Gradient Keren di Blog"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.