Ada dua metode pemberian warna pada icon blog, yaitu:
- Metode Mudah, Ringan, Sederhana
Langsung menambahkan kode fill dan filter pada kode CSS. Metode ini cuma butuh sekali edit saja. Selain itu tidak memperberat loading blog. - Metode Susah, Berat, Tampil Sempurna
Dengan membuat icon SVG baru versi berwarna yang akan mengisi icon SVG lama namun dengan posisi yang sedikit di geser agar muncul garis putih. Metode ini butuh pengeditan yang banyak karena icon SVG di edit semua satu persatu. Selain itu berdampak menurunkan loading blog.
Cara Memberi Warna Pada Icon SVG
A. Metode Mudah
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Cari kode svg .line{fill:none!important
- Lalu hapus kata !important
- Cari kode /* Standar CSS */
- Lalu letakkan kode berikut di bawahnya
.line{fill: rgba(0,157,255,0.15)!important;filter:drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4))}
Keterangan warna:
Kuning = kode pengganti warna icon. Silakan ubah angka di dalam kurung dengan yang baru. Caranya kunjungi web Hexacolor atau CSSgenerator
Biru = kode untuk menambahkan bayangan. Boleh dipakai, dan boleh juga tidak. Jika tidak mau, hapus saja.
Kode 1px 1px 1px merupakan pengaturan untuk posisi bayangan. Angka satu bisa diubah menjadi lebih besar atau lebih kecil
Keterangan Angka
* 1px sebelah kiri untuk mengatur bayangan secara horizontal
* 1px yang tengah untuk mengatur bayangan secara vertikal
* 1px sebelah kanan untuk mengatur blur bayangan
Kode rgb(0 0 0 berfungsi untuk mengatur warna bayangan. Sedangkan kode 0.4 untuk mengatur transparansi warna. Setelah setting warna, Simpan Tema
MAKA HASILNYA
 |
| Penerapan Warna Icon Pada Template Median UI |
B. Metode Sulit
1. Masih di halaman Edit HTML, kita cari kode <!--[ SVG Icon ]--> karena tepat di bawahnya ada kode icon SVG yang harus kita ubah satu persatu. Misalnya icon komentar
<!--[ Chat icon ]--><b:includable id='chat-icon'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path class='fill' d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg></b:includable>
2. Ubah kode di atas menjadi seperti ini
- Hapus garis miring setelah kode
0698449 Z'
- Tambahkan kode di bawah ini setelahnya
style='fill: rgba(245,145,5,.7);stroke: none;' transform='translate(1.0000, 1.4000)'></path>
- Copy kode yang warna kuning, Paste setelah kode di atas
- Tutup kodenya dengan
></path>
3. Bentuk akhir setelah diubah seperti ini
<!--[ Chat icon ]--><b:includable id='chat-icon'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><path class='fill' d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z' style='fill: rgba(245,145,5,.7);stroke: none;' transform='translate(1.0000, 1.4000)'></path><path class='fill' d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'></path></g></svg>
4. Lakukan langkah di atas ke icon yang lain satu persatu. Sampai hasilnya menjadi seperti ini
