GAWARIBLOG - Halo sobat masih semangat kah oprek template blognya? hehe. Bagi kamu yang seorang blogger dan cukup peduli dengan kecepatan loading blog, tutorial kali ini akan sangat berguna untuk membantu mempercepat blog kamu. Bisa di uji di GT-Metrix maupun PageSpeed Google.
Sebelumya saya sudah pernah membuat tutorial tentang penggunaan Fontawesome yang sangat berguna untuk menambahkan Icon dalam penggunaan navigasi blog. Akan tetapi cara ini sedikit memberatkan kecepatan loading blog karena 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.
Kamu bisa ikuti langkah-langkah dibawah untuk penerapan Icon SVG dalam menu Navigasi blog.
1. Pertama kunjungi web material design
2. Pilih salah satu Icon yang kamu inginkan gunakan fitur Search jika ingin Icon SVG yang spesifik.
3. Klik Icon Menu < / > lalu pilih View SVG.
Nah itu adalah kode Icon SVG yang bisa kita gunakan dalam blog, mudah bukan cara mendapatkan Icon SVG. Sekarang kita lanjut ke langkah penerapan.
2. Cari kode ]]></b:skin> atau </style> dengan menggunakan Fungsi CTRL + F.
Lalu Salin kode dibawah ini tepat DIATAS NYA.
3. Lalu ganti kode menu navigasi kalian dengan kode dibawah ini
Bagaimana mudah kan penerapan Icon SVG ini. Jika kamu masih merasa bingung bisa tinggalkan komentar dibawah ya.
Sebelumya saya sudah pernah membuat tutorial tentang penggunaan Fontawesome yang sangat berguna untuk menambahkan Icon dalam penggunaan navigasi blog. Akan tetapi cara ini sedikit memberatkan kecepatan loading blog karena 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. Jadi bagi kamu yang sangat mempentingkan loading blog, penggunaan Icon SVG inilah jawabannya.Kamu bisa ikuti langkah-langkah dibawah untuk penerapan Icon SVG dalam menu Navigasi blog.
Cara Mendapatkan Icon SVG
Untuk mendapatkan Icon SVG yang harus kamu lakukan adalah1. Pertama kunjungi web material design
https://materialdesignicons.com/2. Pilih salah satu Icon yang kamu inginkan gunakan fitur Search jika ingin Icon SVG yang spesifik.
3. Klik Icon Menu < / > lalu pilih View SVG.
Nah itu adalah kode Icon SVG yang bisa kita gunakan dalam blog, mudah bukan cara mendapatkan Icon SVG. Sekarang kita lanjut ke langkah penerapan.
Cara Penerapan Icon SVG Untuk Menu Navigasi Blog
1. Buka akun Blogger kamu dan pilih Edit Tema.2. Cari kode ]]></b:skin> atau </style> dengan menggunakan Fungsi CTRL + F.
Lalu Salin kode dibawah ini tepat DIATAS NYA.
.icosvg{vertical-align:-7px}Script diatas berguna agar Icon SVG berada pada posisi yang pas.
3. Lalu ganti kode menu navigasi kalian dengan kode 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 menu kamu.
height='24' adalah besar nya Icon SVG
M9,2V8H1.........dst.........5V2H9Z adalah kode Icon SVG yang kamu dapatkan dari web material design icon.
Link-Anda ganti dengan Link Menu Blog kamu.
Nama-Menu ganti dengan nama menu kamu.
height='24' adalah besar nya Icon SVG
M9,2V8H1.........dst.........5V2H9Z adalah kode Icon SVG yang kamu dapatkan dari web material design icon.
Bagaimana mudah kan penerapan Icon SVG ini. Jika kamu masih merasa bingung bisa tinggalkan komentar dibawah ya.
Tags
lain-lain