Cara Menambahkan Ikon di Menu Navigasi Template Wuzz Tanpa Menurunkan Skor Performa Blogger

LINTASIANA.COM

• min read

Table of Contents

Cara menambah icon di menu navigasi teMPLATE WUZZ milik mas Sugeng.id

Siapa yang tidak menyukai tampilan blog yang rapi, elegan, dan mudah dinavigasi? Sejak pertama kali menggunakan template Wuzz di blog Lintasiana, saya sudah jatuh cinta dengan desainnya yang bersih, ringan, dan sangat cepat dimuat. Skor performanya yang mencapai angka 98 di Google PageSpeed Insights menjadi salah satu alasan utama saya memilih template ini. Namun, seiring berjalannya waktu, saya merasa ada satu hal kecil yang bisa membuat tampilannya semakin sempurna: menambahkan ikon di setiap menu navigasi.

Bayangkan saja — menu yang tadinya hanya berisi teks biasa, bisa menjadi lebih hidup, lebih mudah dikenali, dan terlihat lebih profesional hanya dengan menambahkan ikon kecil di sebelahnya. Namun, ada satu kekhawatiran besar yang menghantui saya sejak awal: jika saya menambahkan ikon, apakah skor performa template Wuzz yang sudah 98 itu akan turun? Banyak blogger yang pernah mencoba menambahkan ikon menggunakan Font Awesome atau font eksternal, dan hasilnya — skor performa mereka turun drastis karena ada permintaan file tambahan yang memperlambat pemuatan halaman.

Berbulan-bulan saya mencari cara yang tepat. Saya mencoba berbagai metode, mulai dari yang paling sederhana hingga yang paling rumit. Ada yang berhasil tapi merusak tampilan, ada yang bagus tapi memperlambat blog, dan ada yang justru membuat ikonnya tidak muncul sama sekali. Sampai akhirnya, setelah berkali-kali bereksperimen, saya menemukan cara yang sempurna — menambahkan ikon menggunakan SVG langsung di dalam kode HTML, tanpa memuat font eksternal apa pun. Hasilnya? Ikon muncul dengan indah, tampilan menjadi lebih elegan, dan skor performa tetap 98 sama seperti sebelumnya! Dalam artikel ini, saya akan berbagi seluruh pengalaman dan langkah-langkah lengkapnya agar kamu juga bisa melakukannya di blogmu sendiri.

Mengapa Saya Memilih SVG, Untuk Navigasi Tema Wuzz?

Sebelum masuk ke langkah-langkahnya, ada baiknya kita memahami dulu mengapa saya memilih SVG dibandingkan dengan cara lain yang lebih populer seperti Font Awesome. Banyak blogger menggunakan Font Awesome karena terlihat lebih mudah — cukup menambahkan kode link di bagian atas template, lalu tinggal memanggil nama kelas ikonnya. Namun, kemudahan itu ternyata datang dengan harga yang mahal untuk performa blog kita.

Ketika kamu memuat Font Awesome, browser pengunjung harus mengunduh file font dan CSS dari server lain terlebih dahulu sebelum ikonnya bisa muncul. Proses ini menambah waktu pemuatan halaman, terutama bagi pengunjung yang menggunakan jaringan internet yang kurang stabil. Bagi blog yang mengutamakan kecepatan seperti saya, hal ini tentu sangat tidak diinginkan. Apalagi skor performa template Wuzz saya yang sudah 98 — saya tidak ingin menurunkannya hanya demi beberapa ikon kecil.

Di sinilah letak keunggulan SVG. SVG adalah singkatan dari Scalable Vector Graphics — sebuah format gambar yang ditulis langsung dalam kode XML. Artinya, ikon SVG itu sebenarnya adalah teks kode yang bisa langsung dimasukkan ke dalam HTML tanpa perlu mengunduh file tambahan apa pun. Tidak ada permintaan HTTP tambahan, tidak ada file font yang harus dimuat, dan ikonnya langsung muncul bersama kode halaman itu sendiri. Inilah alasan mengapa SVG adalah pilihan terbaik untuk menjaga performa blog tetap optimal.

Selain itu, ikon SVG memiliki keunggulan lain yang sangat berharga: warnanya bisa otomatis mengikuti warna teks di template. Saya menggunakan atribut stroke="currentColor" pada setiap ikon, sehingga warna ikon akan sama persis dengan warna teks menu yang sudah diatur oleh template Wuzz. Tidak perlu mengubah warna secara manual, dan jika suatu hari kamu mengganti tema atau warna template, ikonnya akan menyesuaikan secara otomatis — sungguh sangat praktis!

Menemukan Kode Menu Navigasi di Template Wuzz

Langkah pertama yang harus kita lakukan tentu saja adalah menemukan di mana letak kode menu navigasi itu berada. Karena saya menggunakan HP tanpa komputer, awalnya saya sempat bingung bagaimana cara menemukannya. Tapi ternyata, dengan fitur pencarian di editor HTML Blogger, semuanya menjadi jauh lebih mudah daripada yang saya bayangkan.

Berikut cara yang saya lakukan, dan bisa kamu ikuti juga:

Buka halaman Tata Letak di dashboard Blogger kamu
Tekan tombol html navigasi
Ketik kata kunci yang paling mungkin ada di bagian menu. Pada template Wuzz, kode menu biasanya menggunakan kelas has-sub atau tag nav dengan daftar <ul> dan <li>
Telusuri hasil pencariannya sampai kamu menemukan baris kode yang berisi teks-teks menu yang ada di blogmu — seperti "Beranda", "Halaman", "Kontak", dan sebagainya

Setelah menemukannya, perhatikan struktur kodenya. Pada template Wuzz, biasanya menu disusun menggunakan daftar tidak berurutan dengan tag <ul> dan setiap item menu dibungkus dengan tag <li>. Jika ada sub-menu, maka di dalam <li> tersebut akan ada tag <ul> lagi yang berisi daftar menu turunannya. Inilah struktur yang harus kita jaga agar tidak rusak saat kita menyisipkan kode ikon nanti.

Penting: Sebelum melakukan perubahan apa pun, sangat disarankan untuk mencadangkan/mengunduh template terlebih dahulu. Klik tombol "Cadangkan/Batal" di bagian atas, lalu simpan file template-nya. Jika terjadi kesalahan, kamu bisa langsung mengembalikannya seperti semula tanpa kerusakan apa pun. Saya selalu melakukan ini sebelum mengedit kode — dan kamu juga sebaiknya begitu!

Menyisipkan Kode Ikon SVG di Setiap Item Menu Navigasi Blogger

Sekarang tibalah pada bagian yang paling menarik — menyisipkan kode ikon SVG di sebelah teks menu. Prinsipnya sangat sederhana: di antara tag pembuka <a> dan teks menu, kita tinggal memasukkan kode SVG ikon yang sesuai.

Pada awalnya, saya sempat ragu: bagaimana caranya agar ikonnya sejajar dengan teks, tidak terlalu ke atas atau ke bawah? Setelah beberapa kali percobaan, saya menemukan bahwa menambahkan gaya sederhana langsung pada tag SVG — yaitu style="display:inline-block;vertical-align:middle;margin-right:6px;" — membuat ikonnya sejajar sempurna dengan teks di sebelahnya. Tidak perlu CSS tambahan, tidak perlu mengatur posisi yang rumit, dan hasilnya langsung terlihat rapi.

Berikut adalah contoh kode lengkap yang saya pasang di blog Lintasiana, yang bisa kamu sesuaikan dengan menu di blogmu sendiri:

<li class="has-sub">
  <a href="#" rel="nofollow">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
    Halaman
  </a>
  <ul>
    <li>
      <a href="https://www.lintasiana.com/p/kebijakan-privasi.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        Kebijakan Privasi
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/tentang-kami.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        Tentang Kami
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/contacts-mes.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        Contact Us
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/penafian.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
        Disclaimer
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/sitemap-us.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01"/></svg>
        Sitemap
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/bekerja-sama.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        Promosi
      </a>
    </li>
    <li>
      <a href="https://www.lintasiana.com/p/syarat-ketentuan.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
        S&K
      </a>
    </li>
  </ul>
</li>

<li>
  <a href="https://lintasiana.com/search/label">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
    Index
  </a>
</li>

<li>
  <a href="https://whatsapp.com/channel/0029VbDN2zJ5PO18zZuedD2X" target="_blank" rel="noopener noreferrer">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:inline-block;vertical-align:middle;margin-right:6px;"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
    Subscribe
  </a>
</li>

Perhatikan baik-baik — saya tidak menambahkan satu baris kode CSS pun. Semua gaya penempatan ikon sudah diatur langsung di dalam tag SVG menggunakan atribut style. Inilah kunci utamanya! Karena template Wuzz sudah memiliki CSS bawaan yang mengatur tampilan menu, kita tidak perlu menimpanya atau menambahkan aturan baru. Cukup sisipkan ikon SVG dengan pengaturan perataan sederhana, dan tampilannya akan langsung menyatu dengan desain asli template.

Untuk ukuran ikon, saya menggunakan ukuran 16x16 piksel untuk menu utama dan 14x14 piksel untuk sub-menu. Perbedaan ukuran ini membuat hierarki menu menjadi lebih jelas — pengunjung bisa langsung membedakan mana menu utama dan mana menu turunan hanya dari ukuran ikonnya saja. Tentu saja, kamu bisa mengubah ukurannya sesuai selera dengan mengubah nilai pada atribut width dan height.

Menyimpan & Memastikan Skor Performa Tetap 98

Setelah semua ikon disisipkan dengan rapi, langkah selanjutnya tentu saja adalah menyimpan perubahan. Tapi sebelum itu, pastikan tidak ada tag yang tertutup atau kode yang terpotong. Periksa kembali setiap tag penutup </a>, </li>, dan </ul> — pastikan strukturnya sama persis seperti aslinya, hanya saja sekarang ada kode SVG di dalamnya.

Klik tombol Simpan, lalu tunggu proses penyimpanan selesai. Setelah itu, buka blogmu di tab baru dan lihat hasilnya. Jika ikon muncul dengan rapi di sebelah teks menu, sejajar ke tengah, dan warnanya sama dengan teks — berarti kamu berhasil! 🎉

Sekarang datang pertanyaan yang paling penting: apakah skor performanya turun? Saya sendiri sangat khawatir saat pertama kali mengeceknya. Saya membuka Google PageSpeed Insights, memasukkan alamat blog Lintasiana, dan menunggu hasilnya dimuat. Dan tahukah kamu apa yang terjadi? Skornya tetap 98, sama persis seperti sebelumnya! Tidak turun satu angka pun. Itulah momen yang membuat saya paling bahagia — tampilan menjadi lebih cantik tanpa mengorbankan kecepatan yang sudah menjadi keunggulan template Wuzz.

Mengapa bisa begitu? Karena setiap ikon SVG yang kita tambahkan hanya berukuran sekitar 200–300 karakter — itu jauh lebih kecil daripada satu gambar pun. Dan karena SVG langsung dimuat bersama kode HTML tanpa permintaan tambahan apa pun, waktu pemuatan halaman tidak bertambah sama sekali. Inilah keindahan menggunakan ikon SVG inline — fungsinya maksimal, tapi bobotnya sangat ringan.

Tips Tambahan dari Pengalaman Saya

Selama proses pengerjaan ini, saya belajar beberapa hal penting yang ingin saya bagikan juga untuk kamu:

Selalu cadangkan template sebelum diedit. Saya pernah mengalami kerusakan tampilan karena salah menyisipkan kode, dan karena sudah mencadangkan, saya bisa langsung mengembalikannya tanpa panik. Biasakan hal ini setiap kali sebelum mengedit HTML!
Jangan menambahkan CSS baru jika tidak perlu. Template Wuzz sudah dioptimalkan dengan sangat baik oleh pembuatnya. Menambahkan kode CSS baru yang berlebihan justru bisa menumpuk dan memperlambat pemuatan halaman. Cukup gunakan atribut style langsung pada elemen yang perlu diubah.
Pilih ikon yang sederhana dan jelas. Ikon yang terlalu rumit justru sulit dikenali terutama di layar HP. Pilih ikon yang bentuknya sederhana dan mudah dipahami fungsinya sekilas.
Uji tampilan di HP maupun komputer. Terkadang di komputer terlihat bagus tapi di HP ikonnya terlalu besar atau terlalu kecil. Pastikan tampilannya seimbang di kedua perangkat.
Warna ikon mengikuti teks = tidak perlu diubah. Dengan stroke="currentColor", ikon akan otomatis berubah warna sesuai tema. Ini sangat membantu jika kamu suka mengganti warna tampilan blog dari waktu ke waktu.

Penutup

Menambahkan ikon di menu navigasi template Wuzz ternyata bukan hal yang sulit — asalkan kita tahu caranya yang benar. Yang terpenting adalah tidak tergoda untuk menggunakan cara yang terlihat mudah tapi justru merugikan performa blog kita. Font eksternal memang praktis, tapi harganya terlalu mahal untuk kecepatan dan kenyamanan pengunjung. SVG inline adalah solusi terbaik: ringan, cepat, tidak menurunkan skor performa, dan hasilnya tetap elegan serta profesional.

Dari pengalaman ini, saya belajar satu hal yang berharga: kita tidak harus selalu mengikuti cara yang paling populer. Kadang cara yang lebih sederhana dan manual justru memberikan hasil yang jauh lebih baik dan lebih efisien. Kini, menu navigasi di Lintasiana terlihat jauh lebih hidup, lebih mudah digunakan, dan yang paling penting — skor performanya tetap 98 seperti sedia kala. Semoga pengalaman dan panduan ini bermanfaat untukmu juga, dan semoga blogmu semakin indah serta semakin cepat diakses oleh semua pembaca. Selamat mencoba! 💪

LINTASIANA