Cara Menciptakan Sajian Navigasi Dengan Komplemen Icon/Font Bergambar

Baca Juga

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

Lalu bagaimana cara menciptakan hidangan dengan pemanis icon disamping tulisan, ingin tau ingin membuatnya? Silahkan baca selengkapnya dan berikut pola gambarnya:

Tampilan Menu navigasi versi Mobil Seluler

Untuk menciptakan hidangan pemanis icon ini anda hanya perlu menambah sedikit kode <i class='kode-icon'/> pada hidangan dan mendapat isyarat icon tersebut, kita dapat 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 menciptakan icon pada hidangan navigasi:

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

2. Silahkan perhatikan baik-baik atau di Copas isyarat dibawah ini pasang pada hidangan navigasi:

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

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

3. Sekarang tahap untuk mencari dan mendapat isyarat 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 yaitu logo Sistemap > tinggal cari pada Search box 'sitemap' > sehabis ditemukan klik icon yang solid > kemudian copy isyarat yang muncul di bawahnya

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

Copy kemudian pasang pada isyarat tadi pada HTML hidangan navigasi atau Potter blog anda, kodenya menyerupai diatas sampai terurai menjadi menyerupai berikut:

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

Sitemap yaitu sebagai pola saja!

Gambar dibawah menerangkan: Kode dalam kotak transparan itu yaitu pola riil isyarat sehabis dipasang pada html hidangan navigasi saya:

Kode hidangan navigasi pada HTML template

Nah, berikut ini gambar hidangan navigasi di blog yang aku buat dengan pemanis icon disamping goresan pena sehabis berhasil dipasang:

4. Jika sudah dipasang semua pada HTML silahkan klik Simpan atau Sobat dapat cek Pratinjau terlebih dahulu untuk jaga-jaga kalau ada isyarat icon yang rusak atau tidak valid, tapi kalau sudah nampak terlihat berarti kodenya manis dapat eksklusif simpan setelan saja atau menciptakan hidangan lain lagi. Sangat gampang bukan?

Kesimpulan dalam menciptakan Menu Navigasi dengan Icon atau font bergambar

Saya yakin langkah dalam menambah icon pada hidangan navigasi blog sangat gampang sekali alasannya umumnya blogger sudah paham HTML Template, apalagi kalau 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 supaya Admin dapat membantu.

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