Cara Memakai Icon Svg Untuk Sajian Navigasi Blog - Lubuk Cara

Postingan Baru

Halo teman masih semangat kah oprek template blognya Cara Menggunakan Icon SVG untuk Menu Navigasi Blog

Cara Memakai Icon Svg Untuk Sajian Navigasi Blog

- Halo teman masih semangat kah oprek template blognya? hehe. Bagi kau yang seorang blogger dan cukup peduli dengan kecepatan loading blog, tutorial kali ini akan sangat mempunyai kegunaan untuk membantu mempercepat blog kamu. Bisa di uji di GT-Metrix maupun PageSpeed Google.



Sebelumya saya sudah pernah menciptakan tutorial ihwal penggunaan Fontawesome yang sangat mempunyai kegunaan untuk menambahkan Icon dalam penggunaan navigasi blog. Akan tetapi cara ini sedikit memberatkan kecepatan loading blog alasannya yakni kita harus memanggil script eksternal.

Nah kali ini ada cara yang lebih efesien yaitu dengan mengganti penggunaan Fontawesome dengan menerapkan Icon SVG untuk blog kamu.


Kelebihan Penggunaan Icon SVG dalam Blog

Icon SVG sangat ringan sebagai solusi pengganti Fontawesome. Saat ini jenis Icon SVG sedang booming untuk meringankan dan mengoptimasi kecepatan loading blog. Makara bagi kau yang sangat mempentingkan loading blog, penggunaan Icon SVG inilah jawabannya.

Kamu sanggup ikuti langkah-langkah dibawah untuk penerapan Icon SVG dalam sajian Navigasi blog.

Cara Mendapatkan Icon SVG

Untuk mendapat Icon SVG yang harus kau lakukan adalah

1. Pertama kunjungi web material design

https://materialdesignicons.com/

2. Pilih salah satu Icon yang kau inginkan gunakan fitur Search kalau ingin Icon SVG yang spesifik.

Halo teman masih semangat kah oprek template blognya Cara Menggunakan Icon SVG untuk Menu Navigasi Blog

3. Klik Icon Menu < / > lalu pilih View SVG.



Nah itu yakni aba-aba Icon SVG yang sanggup kita gunakan dalam blog, gampang bukan cara mendapat Icon SVG. Sekarang kita lanjut ke langkah penerapan.

Cara Penerapan Icon SVG Untuk Menu Navigasi Blog

1. Buka akun Blogger kau dan pilih Edit Tema.
2. Cari aba-aba ]]></b:skin> atau </style> dengan memakai Fungsi CTRL + F.
Lalu Salin aba-aba dibawah ini sempurna DIATAS NYA.


.icosvg{vertical-align:-7px}

Script diatas mempunyai kegunaan semoga Icon SVG berada pada posisi yang pas.

3. Lalu ganti aba-aba sajian navigasi kalian dengan aba-aba dibawah ini


<a href='Link-Anda' title='Nama-Menu'><svg class='icosvg' height='24' viewBox='0 0 24 24' width='24'><title>Nama-Manu</title><path d='M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z' fill='#fff'/></svg><span> Nama-Manu</span></a>

Keterangan

Link-Anda ganti dengan Link Menu Blog kamu.
Nama-Menu ganti dengan nama sajian kamu.
height='24' yakni besar nya Icon SVG
M9,2V8H1.........dst.........5V2H9Z yakni aba-aba Icon SVG yang kau dapatkan dari web material design icon.


Bagaimana gampang kan penerapan Icon SVG ini. Jika kau masih merasa resah sanggup tinggalkan komentar dibawah ya.
Sumber https://gawarii.blogspot.com/