Cara Memberi Warna Pada Icon Blog

Saifulah.id - Icon pada Blog lazimnya cuma berupa garis hitam putih polos tanpa warna. Agar lebih menawan dan terlihat berlainan kita dapat menyertakan warna pada icon sesuai dengan warna tema atau logo yang kita punya. Sehingga terlihat cocok dan sama.

Ada dua tata cara bantuan warna pada icon blog, yaitu:

1. Metode Mudah, Ringan, Sederhana
   Langsung menyertakan isyarat fill dan filter pada isyarat CSS. Metode ini cuma butuh sekali edit saja. Selain itu tidak memperberat loading blog.
   
   
2. Metode Susah, Berat, Tampil Sempurna
   Dengan menghasilkan icon SVG gres model berwarna yang mau mengisi icon SVG usang tetapi dengan posisi yang sedikit di geser agar timbul garis putih. Metode ini butuh pengeditan yang banyak alasannya yakni icon SVG di edit semua satu persatu. Selain itu berpengaruh menurunkan loading blog.

Cara Memberi Warna Pada Icon SVG

A. Metode Mudah

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Cari kode svg .line{fill:none!important
6. Lalu hapus kata !important
   
7. Cari kode /* Standar CSS */
8. Lalu letakkan isyarat 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 = isyarat pengganti warna icon. Silakan ubah angka di dalam kurung dengan yang baru. Caranya datangi web Hexacolor atau CSSgenerator
   
   Biru = isyarat untuk menyertakan bayangan. Boleh dipakai, dan boleh juga tidak. Jika tidak mau, hapus saja.
   
   Kode 1px 1px 1px ialah pengaturan untuk posisi bayangan. Angka satu dapat diubah menjadi lebih besar atau lebih kecil
   
   Keterangan Angka
   * 1px sebelah kiri untuk mengendalikan bayangan secara horizontal
   * 1px yang tengah untuk mengendalikan bayangan secara vertikal
   * 1px sebelah kanan untuk mengendalikan blur bayangan
   
   Kode rgb(0 0 0 berfungsi untuk mengendalikan warna bayangan. Sedangkan kode 0.4 untuk mengendalikan transparansi warna.

9.  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 sempurna di bawahnya ada isyarat icon SVG yang mesti 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 isyarat di atas menjadi menyerupai ini

• Hapus garis miring sehabis kode
  

  0698449 Z'

• Tambahkan isyarat di bawah ini setelahnya
  

  style='fill: rgba(245,145,5,.7);stroke: none;' transform='translate(1.0000, 1.4000)'></path>

• Copy isyarat yang warna kuning, Paste sehabis isyarat di atas
• Tutup kodenya dengan
  

  ></path>

3. Bentuk final sehabis diubah menyerupai 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 lainnya satu persatu. Sampai kesannya menjadi menyerupai ini

Tweet