Cara menambahkan Icon baru pada Template Median UI dan Menerapkannya pada Menu Navigasi

9/12/2021

Template blogger Median UI pada defaultnya menggunakan icon berjenis <svg> hal ini sangat bagus karena tidak terlalu membebani template.

Hanya saja kekurangannya adalah susah nya menambhakan icon baru, saya yakin tidak semua orang mahir dalam membuat svg icon.

Tapi anda tidak perlu khawatir karena di sini saya akan memberikan tips bagaimana cara menambhakan icon baru pada template Median UI.

Sebelum masuk ke pembahasan yang lebih lanjut mari kita berkenalan terlebih dahulu dengan icon svg.

Apa itu svg icon?

Singkatnya svg icon adalah sebuah gambar ber ekstensi .svg yang memang di rancang khusus untuk kebutuhan situs, svg di buat dengan menggunakan kode program.

Manfaat menggunakan icon svg untuk kebutuhan situs?

Ada banyak sekali menfaat menggunakan svg ini sebagai kebutuhan situs, di antaranya adalah seperti yang sudah saya katakan yaitu tidak terlalu membebani situs atau template dan juga svg ini tidak akan mengalami blurr atau pecah berapapun ukuranya.

Cara menambahkan icon svg baru

Cara ini saya ambil dari pengalaman saya sendiri, akan ada dua cara yang saya jelaskan di antaranya adalah :

Mengambil svg icon dari docs
Mengambil svg icon dari situs penyedia svg icon

Lebih lengkapnya akan saya jelaskan pada tutorial di bawah ini, untuk yang nomor dua akan saya jelaskan bagaimana cara mendapatkan kode nya.

Mengambil svg icon dari docs

Karena template Median UI ini bersifat sebagai template berbayar, maka tentunya terdapat sebuah situs khusus untuk dokumentasinya yang sengaja di buat oleh pembuatnya langsung.

Untuk mendapatkan kode svg icon dari docs silahkan ikuti langkah-langkah berikut :

Silahkan anda akses link berikut docs.jagodesain.com/svg-icon.html

Dari situs tersebut silahkan pilih icon svg yang anda inginkan , contoh :

<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>

Jika pilihan sudah di tetapkan, silahkan copy kode svg nya.

Mengambil svg icon dari situs penyedia svg icon

Biasanya icon svg yang di sediakan pada situs penyedia svg icon adalah bersifat file dan bukan sebuah kode, jadi di sini saya akan menjelaskan juga cara mendapatkan kode nya.

Buka situs penyedia svg icon

Jika bingung silahkan anda cari di google dengan kata kunci "svg icon free download"
Download file svg icon nya
Jika sudah di download silahkan ubah nama ekstensi nya dari .svg menjadi .txt
Lalu buka dengan menggunakan text viewer ataupun notepad.

Menerapkan icon svg pada Menu Navigasi

Akan saya jelaskan juga cara menambahkan icon svg yang sudah di dapat tadi ke dalam menu navigasi.

Silahkan anda buka Dashboard blogger anda
Klik menu Tema dan tekan tanda panah ke bawah pada sebelah tombol "Sesuaikan"
Pilih Edit html
Pada keyboard tekan Ctrl + F untuk memunculkan papan penelusuran

Jika pada handphone tidak bisa, silahkan download terlebih dahulu keyboard yang terdapat tombol Ctrl + F atau bisa juga secara manual.
Cari kode

Terapkan kode ini di bawahnya dan ikuti perintah berikut :

<b:includable id='Nama id'>
        <!--[ Nama icon ]-->
        // Simpan kode svg di sini
</b:includable>

// Contoh

<b:includable id='back-icon'>
        <!--[ Back icon ]-->
        <svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</b:includable>

Selanjutnya cari widget HTMLooo, atau klik icon untuk mempercepat pencarian
Terapkan kode berikut ini, di bawah kode  Jangan lupa untuk mengubah yang di tandai

Mungkin akan terdapat banyak kode seperti itu, silahkan sesuaikan di link mana anda ingin menerapkan icon nya.
```
<b:include name='nama id yang sudah di terapkan pada icon sebelumnya'/>

// Contoh

<b:include name='back-icon'/>
```
Klik icon save jika sudah selesai.

Itu tadi adalah cara membuat icon svg baru dan menerapkannya pada menu navigasi, jika ada kendala atau merasa kebingungan jangan ragu untuk menuliskannya di kolom komentar.

Dinandi.com