Cara Menambahkan Icon Pada Menu Navigasi Bar Blog

Cara Menambahkan Icon Menu Navigasi Bar Blog

Menambahkan Navigasi pada Blog merupakan keharusan untuk membuat pengunjung Blog lebih tertarik, dan memudahkan dalam mengakses suatu Blog.

Menu Navigasi pun bisa dibuat lebih menarik lagi dengan menambahkan Icon yang sesuai dengan Navigasi tersebut. Sebagai contoh yang ada di blog saya yang sudah saya modifikasi dengan menambahkan Logo pada Menu Navigasinya.  

Icon pada menu ini, biasanya menggunakan logo SVG. Dengan sedikit edit di HTML blog, anda sudah bisa membuat menu pada blog menjadi lebih cantik.

Dalam artikel kali ini saya ingin berbagi pengalaman ketika saya menambahakan Icon pada Menu navigasi bar yang sudah saya lakukan beberapa hari yang lalu. Caranya pun sangat mudah tanpa perlu menggunakan CSS tambahan.

Langkah yang pertama buka dasbor blogger anda, dan edit HTML

Kedua carilah kode HTML untuk menu navigasi bar anda. Karena saya menggunakan template Viomagz maka kode HTML yang saya contohkan pun yang adalah kode HTML menu bar yang ada di template saya. Kodenya kurang lebih sebagai berikut

<ul>

  <li><a href='https://www.bocahsihir.info/p/blog-page_20.html'> JASA PEMBUATAN MAHAR</a></li>

</ul>

Langkah ketiga, masuk lah ke https://fontawesome.com/v4.7.0/icons/#web-application disana Anda akan mendapatkan banyak sekali contoh icon yang bisa anda gunakan untuk menghias menu navigasi blog anda.

Keempat, setelah anda menemukan icon yang cocok, bisa langsung ambil kodenya dan letakan pada HTML menu navigasi blog anda. Letakan kode Icon navigasi sebelum judul navigasi bar yang ada di blog anda. Jika sudah maka hasilnya kurang lebih seperti berikut ini.

<ul>

  <li><a href='https://www.bocahsihir.info/p/blog-page_20.html'><i aria-hidden='true' class='fa fa-bookmark'/> JASA PEMBUATAN MAHAR</a></li>

</ul>

Langkah terakhir SAVE dan liat hasilnya.

Nah mudah kan? Semoga tulisan saya tentang Cara Menambahkan Icon Pada Menu Navigasi Bar Blog bisa bermanfaat. Selamat mencoba

Berbagi :