Cara Membuat Menu Navigasi dengan Tambahan Icon/font Bergambar

Membuat Menu Navigasi dengan icon/font bergambar - Menu web dengan icon label atau konten halaman ternyata lebih mudah dimengerti dan menarik perhatian pembaca termasuk saya, menyediakan menu navigasi juga sangat penting sekali untuk Page View karena mempermudah Visitor dalam menelusuri web/blog.

Lalu bagaimana cara membuat menu dengan tambahan icon disamping tulisan, penasaran ingin membuatnya? Silahkan baca selengkapnya dan berikut contoh gambarnya:

Tampilan Menu navigasi versi Mobil Seluler

Untuk membuat menu tambahan icon ini anda hanya perlu menambah sedikit kode <i class='kode-icon'/> pada menu dan mendapatkan kode icon tersebut, kita bisa cari di situs-situs penyedia font bergambar secara gratis! saya rekomendasikan ambil di fontawesome.com saja

Cara Membuat Menu Navigasi dengan Icon disamping Tulisan

Langsung pada langkah membuat icon pada menu navigasi:

1. Jika Anda akan menambahkan icon pada menu navigasi, silahkan buka Blog Sobat terlebih dahulu > lalu pada Dashboard pilih menu Template lalu kilik Edit HTML silahkan cari kode untuk edit menu navigasi atau Potter blog
(Anda bisa beck up Template terlebih dahulu untuk edit HTML)

2. Silahkan perhatikan baik-baik atau di Copas kode dibawah ini pasang pada menu navigasi:

<li><a href='link-target'><i class='kode_icon'/> judul</a></li>

• !) Jika blog anda sudah ada menu navigasinya berarti cukup menabahkan kode <i class='kode_icon'/> saja pada kode menu untuk menambah icon.

3. Sekarang tahap untuk mencari dan mendapatkan kode icon, Anda silahkan  kunjungi http://fontawesome.io/icons/ cari icons atau font bergambar secara gratis dan legal tidak perlu yang Pro, pilih saja icon solid tapi sesuai untuk menu.

Contoh: yang Saya cari di fontawesome adalah logo Sistemap > tinggal cari pada Search box 'sitemap' > setelah ditemukan klik icon yang solid > lalu copy kode yang muncul di bawahnya

(Catatan! biasanya kodenya seperti ini:
fas-fa-icon, hapus huruf 's' pada fas menjadi fa fa-sitemap)

Copy lalu pasang pada kode tadi pada HTML menu navigasi atau Potter blog anda, kodenya seperti diatas hingga terurai menjadi seperti berikut:

<li><a href='url/p/sitemap_blog_anda'><i class='fa fa-sitemap'/> judul </a></li>

Sitemap adalah sebagai contoh saja!

Gambar dibawah menerangkan: Kode dalam kotak transparan itu adalah contoh riil kode setelah dipasang pada html menu navigasi saya:

Kode menu navigasi pada HTML template

Nah, berikut ini gambar menu navigasi di blog yang saya buat dengan tambahan icon disamping tulisan setelah berhasil dipasang:

4. Jika sudah dipasang semua pada HTML silahkan klik Simpan atau Sobat bisa cek Pratinjau terlebih dahulu untuk jaga-jaga jika ada kode icon yang rusak atau tidak valid, tapi jika sudah nampak terlihat berarti kodenya bagus bisa langsung simpan setelan saja atau membuat menu lain lagi. Sangat mudah bukan?

Kesimpulan dalam membuat Menu Navigasi dengan Icon atau font bergambar

Saya yakin langkah dalam menambah icon pada menu navigasi blog sangat mudah sekali karena umumnya blogger sudah paham HTML Template, apalagi jika blog Sobat sudah ada menunya tinggal ditambahkan saja slot kode <i class='#'/> untuk menabahkan Icon pada menu, tapi jika dirasa masih susah coba Agan sharing atau bertanya langsung di kolom komentar saja semoga Admin bisa membantu.

Lihatlah : Cara Membuat Sitemap Mode Slow Klik per Label di Blog