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 embel-embel icon disamping tulisan, ingin tau ingin membuatnya? Silahkan baca selengkapnya dan berikut teladan gambarnya:
Untuk menciptakan hidangan embel-embel 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
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:
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 yakni logo Sistemap > tinggal cari pada Search box 'sitemap' > sesudah 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:
Sitemap yakni sebagai teladan saja!
Gambar dibawah menerangkan: Kode dalam kotak transparan itu yakni teladan riil isyarat sesudah dipasang pada html hidangan navigasi saya:
Nah, berikut ini gambar hidangan navigasi di blog yang aku buat dengan embel-embel 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 kalau ada isyarat icon yang rusak atau tidak valid, tapi kalau sudah nampak terlihat berarti kodenya anggun dapat eksklusif simpan setelan saja atau menciptakan hidangan lain lagi. Sangat gampang bukan?
Lihatlah : Cara Membuat Sitemap Mode Slow Klik per Label di Blog
Lalu bagaimana cara menciptakan hidangan dengan embel-embel icon disamping tulisan, ingin tau ingin membuatnya? Silahkan baca selengkapnya dan berikut teladan gambarnya:
 |
| Tampilan Menu navigasi versi Mobil Seluler |
Untuk menciptakan hidangan embel-embel 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 yakni logo Sistemap > tinggal cari pada Search box 'sitemap' > sesudah 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 yakni sebagai teladan saja!
Gambar dibawah menerangkan: Kode dalam kotak transparan itu yakni teladan riil isyarat sesudah dipasang pada html hidangan navigasi saya:
 |
| Kode hidangan navigasi pada HTML template |
Nah, berikut ini gambar hidangan navigasi di blog yang aku buat dengan embel-embel icon disamping goresan pena sesudah berhasil dipasang:
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 agar Admin dapat membantu.Lihatlah : Cara Membuat Sitemap Mode Slow Klik per Label di Blog