Cara Menciptakan Sajian Navigasi Dengan Suplemen 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 sajian navigasi juga sangat penting sekali untuk Page View alasannya yaitu mempermudah Visitor dalam menelusuri web/blog.

Lalu bagaimana cara menciptakan sajian dengan pelengkap icon disamping tulisan, ingin tau ingin membuatnya? Silahkan baca selengkapnya dan berikut teladan gambarnya:

Tampilan Menu navigasi versi Mobil Seluler

Untuk menciptakan sajian pelengkap icon ini anda hanya perlu menambah sedikit kode <i class='kode-icon'/> pada sajian dan mendapat arahan 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 sajian navigasi:

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

2. Silahkan perhatikan baik-baik atau di Copas arahan dibawah ini pasang pada sajian navigasi:

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

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

3. Sekarang tahap untuk mencari dan mendapat arahan 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' > sesudah ditemukan klik icon yang solid > kemudian copy arahan yang muncul di bawahnya

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

Copy kemudian pasang pada arahan tadi pada HTML sajian 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 teladan saja!

Gambar dibawah menerangkan: Kode dalam kotak transparan itu yaitu teladan riil arahan sesudah dipasang pada html sajian navigasi saya:

Kode sajian navigasi pada HTML template

Nah, berikut ini gambar sajian navigasi di blog yang aku buat dengan pelengkap icon disamping goresan pena sesudah berhasil dipasang:

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

Kesimpulan dalam menciptakan Menu Navigasi dengan Icon atau font bergambar

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

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