Kalau ditanya bagian mana dari blog yang paling sering dikunjungi, jawabannya jelas: menu navigasi. Karena di situlah pembaca biasanya mencari arah, mau balik ke Home, mau lihat kategori, atau mau cari halaman Contact.
Nah, masalahnya adalah menu di Blogger (Blogspot) sering kali tampil polos bangetcuma tulisan doang. Saya dulu sempat merasa, “Kok kayaknya membosankan ya? Masa tulisan Home doang, tanpa sentuhan visual?”
Dari situ lah saya mulai bereksperimen menambahkan ikon di menu Blogger, khususnya di tombol Home. Ternyata hasilnya bukan cuma mempercantik tampilan, tapi juga bikin navigasi lebih gampang dipahami. Kali ini saya mau berbagi pengalaman pribadi saya saat mencoba menambahkan ikon di menu, plus daftar ikon populer yang bisa kamu pakai.
Awal Mula: Bosan dengan Menu yang Polos
Saya mulai ngeblog di Blogger dengan template bawaan. Menunya standar banget: Home, About, Contact. Lama-lama saya bosan, apalagi setelah sering jalan-jalan ke blog lain yang menunya sudah dikasih ikon kecil.
Contoh, ada blog yang tombol Homenya pakai ikon rumah 🏠, dan itu kelihatan manis banget. Saya langsung mikir: “Kenapa blog saya nggak bisa kayak gitu?”
Akhirnya saya memutuskan untuk mencoba.
Cara Pertama yang Saya Coba: Pakai Emoji
Jujur, cara paling gampang adalah langsung tambahin emoji di nama menu.
Misalnya, di Layout > Pages, saya ubah judul halaman dari:
Home
jadi:
🏠 Home
Begitu disimpan, ikon rumah langsung muncul. Simpel banget!
Tapi ada sedikit catatan: emoji ini tampilnya beda-beda di tiap perangkat. Di Android bagus, di iPhone keren, tapi di laptop kadang warnanya aneh. Jadi kalau kamu pengen konsistensi penuh, emoji bukan solusi jangka panjang.
Cara Kedua: Pakai Font Awesome
Setelah coba emoji, saya merasa masih kurang puas. Akhirnya saya belajar pakai Font Awesome, sebuah library ikon yang bisa dipasang di Blogger.
Caranya:
-
Masuk ke Tema > Edit HTML
-
Tambahkan kode ini di dalam
<head>:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> -
Edit bagian menu, dari yang semula:
<li><a href="/">Home</a></li>jadi:
<li><a href="/"><i class="fa fa-home"></i> Home</a></li>
Begitu saya refresh, muncul ikon rumah kecil yang elegan. Bedanya dengan emoji? Jauh lebih konsisten dan profesional.
Rintangan yang Saya Temui
Tentu saja tidak semuanya mulus. Template bawaan Blogger gampang diubah, tapi waktu saya coba di template kustom (yang saya pakai sekarang), ternyata menunya digenerate otomatis. Jadi saya harus utak-atik lebih dalam.
Bahkan ada momen di mana ikon tidak muncul sama sekali karena lupa menaruh link Font Awesome. Rasanya sebel, tapi akhirnya saya jadi belajar banyak soal struktur HTML template Blogger.
Daftar Ikon Populer yang Sering Saya Pakai
Setelah bisa menambahkan ikon, saya jadi ketagihan. Tidak hanya untuk menu Home, saya juga tambahin ikon di menu lain. Tapi biar tetap rapi, saya pilih ikon yang simpel dan relevan.
Berikut beberapa daftar ikon populer yang bisa kamu pakai (dalam dua versi: emoji dan Font Awesome):
1. Menu Utama
-
🏠 Home →
<i class="fa fa-home"></i> -
📄 Artikel / Postingan →
<i class="fa fa-file-alt"></i> -
📚 Tutorial / Kategori →
<i class="fa fa-book"></i>
2. Profil & Tentang
-
👤 About Me →
<i class="fa fa-user"></i> -
👥 Team →
<i class="fa fa-users"></i> -
🏢 Company Profile →
<i class="fa fa-building"></i>
3. Kontak & Sosial Media
-
✉️ Contact →
<i class="fa fa-envelope"></i> -
📞 Telepon →
<i class="fa fa-phone"></i> -
💬 Chat →
<i class="fa fa-comments"></i> -
🔗 Sosial Media →
<i class="fa fa-link"></i>
4. Lain-Lain
-
🔍 Search →
<i class="fa fa-search"></i> -
⚙️ Pengaturan / Tools →
<i class="fa fa-cog"></i> -
⭐ Favorit →
<i class="fa fa-star"></i> -
🛒 Shop / Produk →
<i class="fa fa-shopping-cart"></i>
Dengan ikon-ikon ini, saya bisa bikin menu blog lebih interaktif tanpa terlihat berlebihan.
Tips Pribadi dalam Menambahkan Ikon
Dari pengalaman saya, ada beberapa tips penting:
-
Jangan kebanyakan ikon
Kalau semua menu dikasih ikon, tampilan bisa berantakan. Pilih menu yang penting saja. -
Sesuaikan dengan tema blog
Kalau blogmu tentang teknologi, pakai ikon laptop 💻 atau kode. Kalau tentang masakan, pakai ikon 🍳 atau 🍲. -
Pastikan loading tetap cepat
Font Awesome itu ringan, tapi kalau ditambah banyak script lain bisa memperlambat loading. Jadi jangan berlebihan. -
Uji di berbagai perangkat
Selalu cek hasilnya di HP dan laptop. Kadang tampilan beda.
Hasil Akhir yang Saya Rasakan
Setelah menambahkan ikon, saya merasa blog saya jadi lebih hidup. Navigasi terasa lebih gampang, pembaca juga bisa langsung mengidentifikasi menu hanya dengan melihat ikon.
Saya bahkan dapat komentar dari teman blogger:
“Wih, menunya keren sekarang. Jadi lebih gampang cari Home sama Contact.”
Dan itu cukup bikin saya senyum-senyum sendiri. Hehe.
Itulah pengalaman pribadi saya menambahkan ikon di menu Blogger, mulai dari coba-coba emoji sampai akhirnya jatuh hati sama Font Awesome. Saya juga bagikan daftar ikon populer yang bisa kamu gunakan biar blogmu makin menarik.
Bagi saya, perubahan kecil seperti ini ternyata membawa dampak besar. Blog terlihat lebih profesional, pengunjung lebih nyaman, dan saya pun jadi makin semangat ngeblog.
Kalau kamu juga pakai Blogger, saya sangat menyarankan untuk mencoba. Siapa tahu, perubahan kecil ini bisa bikin pengunjung betah lebih lama di blogmu.
0 Comments:
Post a Comment