Dapatkan Update Informasi Dari Ngopimedia.com Follow Google News

Cara Menambahkan Icon Di Menu Navigasi Blog

 



Ngopimedia.com - Cara Menambahkan Icon Di Menu Navigasi Blog , Halo sobat Ngopi Media dikesempatan kali ini kami ingin menuliskan sebuah  artikel yang berjudul  " GAMPANG BANGET !!! Cara Menambahkan Icon Di Menu Navigasi Blog ". mungkin teman-teman merasa bosan dengan tampilan menu navigasi teman-teman yang berbentuk tulisan saja  atau tanpa ada icon sedikitpun pada menu blog nya , tapi jangan khawatir disini ngopi media  akan memberikan tutorialnya yang bisa di bilang gampang untuk teman-teman ikuti.

Namun sebelum membahas tentang cara menambahkan icon di menu navigasi blog ngopi media akan menjelaskan apa sih itu menu navigasi?. Menu Navigasi merupakan sebuah petunjuk atau arahan bagi pengunjung yang sedang berkunjung ke blog atau website teman-teman, menu navigasi ini adalah hal yang sangat penting bagi sebuah blog atau website, agar pengunjung tidak tersesat dan tidak bingung

Untuk menambahkan icon pada menu navigasi blog teman-teman hanya menggunakan SVG dan itu tidak akan memberatkan loading blog anda, untuk pembuatannya pun sangat mudah tanpa harus menggunakan jasa orang lain  sehingga tempilan menu blog teman-teman akan terlihat lebih cantik.

Apa kah keuntungan menambahkan icon pada menu navigasi?. Menambahkan icon pada menu navigasi blog memiliki fungsi  agar blog teman-teman terlihat cantik dan pengunjung tertarik dengan tampilan blog teman-teman, nah tidak perlu berlama – lama , yuk langsung simak tutorialnya dibawah ini

Cara Menambahkan Icon Pada Menu Navigasi Blog

1. Login ke akun blog teman-teman.
2. Cari menu Tema > Edit HTML
3. Masukan kode dibawah ini dan letakkan tepat diatas "</head>"

<script crossorigin='anonymous' src='https://kit.fontawesome.com/e188a75150.js'/>


 4. Cari icon yang akan teman-teman gunakan di website https://fontawesome.com/v4.7.0/icons/#web-application di website tersebut teman-teman bisa mendapatkan banyak sekali icon yang teman-teman inginkan

5. Jika teman-teman sudah dapat kodenya, teman-teman bisa langsung ambil kode tersebut dan letakkan di menu navigasi blog teman-teman. Sebagai contoh ngopi media berikan seperti kode dibawah ini

Misal kita akan mengubah icon menu Tutorial dan ditambahkan dengan kode Book yang kita ambil dari website di atas

<i class="fa fa-book" aria-hidden="true"></i>

Kode Sebelum di ubah adalah :

<li><a href='https://www.ngopimedia.com/search/label/TUTORIAL'>TUTORIAL</a></li>
Tampilan nya seperti ini




ubah kodenya menjadi

<li><a href='https://www.ngopimedia.com/search/label/TUTORIAL'><i class="fa fa-book" aria-hidden="true"></i> TUTORIAL</a></li>

Maka Tampilan Nya akan menjadi seperti ini



6. Kemudian Save tema dan lihat hasilnya
7. Selesai

Bagaimana teman-teman? Gampang Banget Kan ??? . Mungkin itu saja artikel ngopi media kali ini tentang "Cara Menambahkan Icon Pada Menu Navigasi Blog", semoga dengan adanya artikel ini bisa membantu teman-teman yang sedang mempercantik menu navigasi blog teman-teman.

Jika anda kesulitan atau masih belum mengerti silahkan komentar di kolom dibawah ini, saya akan berusaha untuk membalas satu per satu, sekian dulu artikel dari saya. Semoga bermanfaat.

Post a Comment