Hallo sahabat blogger semua? apa kabar? samoga sehat selalu yaaa, aaamiin!
Pada Kesempatan kali ini Sahrilku.Com akan membagikan sebuah cara atau tutorial bagaimana cara memasang icon-icon SVG pada Menu Navigasi di Template Viomagz seperti pada template yang saya gunakan sekarang ini.
Template Viomagz yang di desain oleh author Mas Sugeng ini tampilannya memang sudah cukup baguss, tapi lagi-lagi sesuai selera dari teman-teman blogger itu sendiri apakah masih ingin memodifikasi template ini atau cukup dengan tampilan standard saja sudah cukup, kalau saya pribadi lebih suka memodifikasi template ini agar se menarik mungkin di mata pengunjung dan bisa membuat betah para pengunjung juga.
Icon SVG sendiri setelah saya memasang nya kurang lebih sebulan tidak dapat mempengaruhi loading blog kita, dan kamu tidak perlu membuat SVG sendiri, karena sudah tersedia lengkap di sebuah website penyedia icon gratis (materialdesignicons.com).
Untuk kalian yang minat untuk memasang icon SVG di menu navigasi di template viomagz, kalian bisa mengikuti langkah-langkah dibawah ini.
Cara Memasang Icon SVG di Blog
Langkah Pertama :
- Siapkan Icon SVG.
- Buka website resmi Icon SVG materialdesignicons.com.
- Cari Icon yang akan kamu pakai.
- Setelah itu klik Icon yang akan digunakan
- Selanjutnya klik tanda </>.
- Lalu klik View SVG
- Berikutnya akan muncul kode SVG, silahkan copy dahulu dan tempelkan di notepad.
- Contoh kode yang saya copy Icon SVG Laptop
<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z" /></svg>
- Hapus pada text yang telah saya blok dengan warna hijau, sehingga akan menjadi seperti ini:
<svg viewBox="0 0 24 24"><path d="M4,6H20V16H4M20,18A2,2 0 0,0 22,16V6C22,4.89 21.1,4 20,4H4C2.89,4 2,4.89 2,6V16A2,2 0 0,0 4,18H0V20H24V18H20Z" /></svg>
Kenapa harus di hapus pada bagian itu?
Karena kita nantinya akan menggunakan tambahan CSS untuk style nya.
Baca Juga : Cara Membuat Halaman Forum Disqus di Blog HTML
Setelah kode SVG sudah di siapkan, sekarang kita akan lanjut di tahap 2 yaitu pemasangan SVG pada HTML Template.
Langkah Kedua:
- Masuk di Akun Blogger kamu.
- Pilih Menu Tema.
- Klik titik tiga dan pilih Edit HTML.
- Cari kode dibawah ini.
<!-- menu navigasi header start -->
- Untuk memudahkan pencarian, tekan CTRL+F untuk memunculkan fitur pencarian.
- Tempelkan kode SVG yang sudah kamu siapkan tadi. Lebih tepatnya pada sebelum Nama/Judul men navigasi, seperti dibawah ini contohnya.
<li><a href='https://www.sahrilku.com/search/label/Tutorial'><svg viewBox='0 0 24 24'><path d='M 10 20 V 14 H 14 V 20 H 19 V 12 H 22 L 12 3 L 2 12 H 5 V 20 H 10 Z'/></svg> TUTORIAL </a></li>
- Setelah itu Simpan Tema.
- Jangan panik ketika anda melihat icon tampil besar, karena seperti yang saya katakan sebelumnya kita akan menambahkan Style dengan CSS.
Untuk yang versi Viomagz terbaru 4.9.3
Cukup kalian tempelkan Kode Icon SVG nya seperti gambar dibawah ini.
 |
| Pilih Menu Tata Letak "Kode Menu Navigasi" |
Langkah Ketiga.
- Kita akan menambahkan Style SVG dengan CSS
- Cari tag ini. /* NAV MENU */
- Jika ketemu, saln dan tempelkan kode CSS di bawah ini.
#cssmenu svg{fill: #ffffff;width: 16px;height: 16px;vertical-align: -3px;background-size: 13px;}
- Tempelkan seperti pada gambar dibawah ini.
Contoh penempatan Kode CSS style SVG
- Lalu Simpan Tema dan lihat hasilnya.
- Refresh Blog.
Untuk yang versi Viomagz terbaru 4.9.3
Cukup kalian tempelkan Kode CSS nya seperti gambar dibawah ini.
 |
| Pilih Menu Tata Letak "Custom CSS" |
Jika ukuran Icon SVG belum sesuai dengan text silahkan kalian modifikasi sesuai elera kamu termasuk warna SVG juga bisa kamu ubah sesuka hati.
Kamu hanya cukup menambahkan kode Stlye diatas sekali saja meski kamu memasang 5 Icon SVG pada Menu Navgigas, Karena ini sudah berlaku untuk keseluruhan icon SVG yang berada di id='cssmenu'.
Bagaimana cukup mudah bukan?
Jika masih bingung silahkan bertanya di Forum disqus yang sudah saya sediakan.
Itulah cara menambahkan Icon SVG pada Menu Navigasi di Template Viomagz. Semoga bermanfaat yaaa.