🔔 Aktifkan notifikasi disini Google News

Cara Memberi Warna Pada Icon Blog

Cara Memberi Warna Pada Icon Blog
Saifulah.id
 - Icon pada Blog biasanya hanya berupa garis hitam putih polos tanpa warna. Agar lebih menarik dan terlihat berbeda kita bisa menambahkan warna pada icon sesuai dengan warna tema atau logo yang kita punya. Sehingga terlihat cocok dan sama.

Ada dua metode pemberian warna pada icon blog, yaitu:
  1. 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.

  2. 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 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
    Cara Menghapus Icon dan Tombol Header (Profile, Translate, Dark Mode) Median UI

  5. Cari kode svg .line{fill:none!important
  6. Lalu hapus kata !important
  7. Cari kode /* Standar CSS */
  8. 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.

  9.  Setelah setting warna, Simpan Tema

MAKA HASILNYA
Cara Memberi Warna Pada Icon Blog Median UI
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
Cara Memberi Warna Pada Icon Blog


Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

14 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. kalau mau munculin icon profil yang di kanan atas itu gimana ya biar muncul juga di dalam artikel (bukan hanya homepage)?
  2. Kode tag condition homepage harus di hapus atau diganti. Nanti saya buatkan tutorialnya.
    1. sudah bisa min, thanks.

      Kalau untuk iklan di sidebar saya ga muncul di versi mobile, harus edit ukuran kah? Kalau edit kode adsense takutnya melanggar nnti
    2. Iya harus edit ukuran. Mengubah ukuran iklan bukan termasuk pelanggaran.
    3. Ternyata Menghapus tag kondisional justru jadi ga bisa diklik icon profilnya di artikel, cuma di homepage 😂 ada solusi kah min? Kalau tutorial versi mimin gmna?
    4. Berarti ada kode lain yang harus ditambahkan 🤣
      Tunggu postingan selanjutnya aja ya 😁
  3. Min kan,slot iklan yg di postingan ada 2 nah,agar iklan muncul kita harus pake tag pemanggil seperti < p >, pertanyaannya apakan itu bisa otomatis muncul diatas dan bawah tanpa harus pake kode pemanggil.
    1. Maksudnya iklan yg di tengah kan? Iklan itu bisa muncul otomatis. Tinggal kita menyesuaikan kebiasaan kita.

      Ada blogger yg suka nulis pakai sistem paragraf, jadi kodenya pakai < p >

      Tapi ada juga yg suka nulis pakai sistem enter, jadi kodenya pakai < br/ >

      Nah, tinggal atur sekali aja di template mau pakai < p > atau < br >. Lalu ganti baris ke berapa, Nanti iklan akan muncul tanpa perlu menambahkan kode itu lagi saat menulis artikel.
  4. Next cara menghilangkan effect background transparent di sidebar dsb, dalam tampilan mobile, saya rasa bikin lambat.
    1. Effect background transparent yang mana ya kak, bisa kirimkan screenshotnya ke forum diskusi? Klik Disini
  5. Hallo admin, cara menonaktifkan table of contents gimna ya min?
    1. Tutorialnya sudah dibuatkan ya kak. Silakan kunjungi postingan berikut Klik Disini
  6. Next Mas, Membuat Kotak Donate/Donasi:)
    1. Sudah di posting ya bank, klik di sini Cara Membuat Widget Kotak Donasi
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.