Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Cara Menambahkan Icon Di Menu Navigasi Blog

icon navigasi

Pada kesempatan kali ini saya akan memberikan tutorial Cara Menambahkan Icon Pada Menu Navigasi Blog, mungkin anda bosan dengan tampilan menu navigasi anda yang berbentuk tulisan saja tanpa ada icon sedikitpun. Disini saya akan memberikan tutorialnya

Namun sebelum itu saya akan menjelaskan apa sih itu menu navigasi?. Menu Navigasi adalah sebuah petunjuk atau arahan bagi pengunjung yang sedang berkunjung ke blog anda, menu navigasi adalah hal yang sangat penting bagi sebuah blog, agar pengunjung tidak tersesat dan tidak bingung

Untuk menambahkan icon pada menu navigasi anda hanya menggunakan SVG dan itu tidak akan memberatkan loading blog anda, untuk pembuatannya pun sangat mudah tanpa harus menggunakan jasa orang lain (bagi yang belum mengerti dunia perkodingan).

Apa sih untungnya menambahkan icon pada menu navigasi?. Menambahkan icon pada menu navigasi adalah agar blog anda terlihat cantik dan pengunjung tertarik dengan tampilan blog anda, daripada berlama – lama yuk langsung simak tutorialnya dibawah ini

Cara Menambahkan Icon Pada Menu Navigasi Blog

1. Login ke akun blog anda
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 anda gunakan di website https://fontawesomr.com/v4.7.0/icons/#web-application. di website tersebut anda bisa mendapatkan banyak sekali icon yang anda inginkan
5. Jika anda sudah dapat kodenya, anda bisa langsung ambil kode tersebut dan letakkan di menu navigasi blog anda. Untuk sebagai contoh akan saya berikan seperti kode dibawah ini

<li><a href="https://www.blogmaskaton.my.id/search/label/Informasi"><i class="fa fa-bullhorn" aria-hidden="true"></i> Informasi</a></li>
<li><a href="https://www.blogmaskaton.my.id/search/label/Internet"><i class="fa fa-coffee" aria-hidden="true"></i> Internet</a></li>
<li><a href="https://www.blogmaskaton.my.id/search/label/Pendidikan"><i class="fa fa-graduation-cap" aria-hidden="true"></i> Pendidikan</a></li>
<li><a href="https://www.blogmaskaton.my.id/search/label/Sejarah"><i class="fa fa-history" aria-hidden="true"></i> Sejarah</a></li>
<li><a href="https://www.blogmaskaton.my.id/search/label/Traveling"><i class="fa fa-plane" aria-hidden="true"></i> Traveling</a></li>

6. Kemudian Save tema dan lihat hasilnya
7. Selesai

Bagaimana? Sangat mudah bukan. Mungkin itu saja artikel saya kali ini tentang Cara Menambahkan Icon Pada Menu Navigasi Blog, semoga dengan adanya artikel ini bisa membantu anda yang sedang mempercantik menu navigasi blog anda.

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

Katon
Katon Sebuah kesuksesan tak luput dari kegagalan "Yakin aja pasti bisa" :)

5 comments for "Cara Menambahkan Icon Di Menu Navigasi Blog"

  1. Terimakasih mas, artikelnya sangat bermanfaat. Sudah di praktekkan dan hasilnya work. sukses terus untuk blog maskaton

    ReplyDelete
  2. jadi kode iconnya di letakan dimana ya

    ReplyDelete
    Replies
    1. Itu diatas sudah ditulis dengan jelas kak, mohon untuk dibaca sekali lagi terima kasih

      Delete
  3. Terimakasih gan, saya lagi muter-muter nyari artikel ini akhirnya ketemu juga.
    Kalo cara nambahin icon disetiap judul widget gimana gan?
    Ini blog saya: picgora.blogspot.com

    ReplyDelete