Cara Menambah Icon Di Menu Navigasi Blog Biar Keren

Cara Menambah Icon Di Menu Navigasi Blog Biar Keren - Halo sobat blogger, jumpa lagi dengan ShareKu disini. Kali ini saya akan membagikan tips sederhana seputar otak atik template yaitu cara menambahkan icon di menu navigasi pada blog.

Apabila sobat berkunjung ke blog orang lain dan melihat di baris menu dan memperhatikan ada icon kecil di sebelah nama atau label menu pastilah akan berpikir iya nih keren dan gak berkesan monoton tampilannya.

Seperti contohnya misal pada menu "Home" disampingnya ada icon rumah atau misalkan pada menu "Contact" ada icon telepon atau icon surat, nah seperti itulah yang saya maksud icon di menu navigasi.

Seberapa betah dan seberapa tertarik pengunjung untuk "mengeksplorasi" blog kita tentu karena dipengaruhi isi konten yang bagus dan bermanfaat, navigasi yang mudah dan tentu saja tampilan blog yang bagus.

Fungsi dan tujuan menambah icon di menu navigasi ini sebenarnya tidak lain tidak bukan hanya untuk membuat tampilan blog kita menjadi lebih menarik dan berkesan elegan.

Cara menambah icon ini bisa dilakukan dengan beberapa cara, misal dengan menggunakan gambar atau dengan menggunakan icon dari font Awesome. Nah untuk yang akan saya bagikan tips nya kali ini adalah dengan menggunakan Icon dari font Awesome.

Cara menambah icon di menu blog agar lebih keren

Untuk menambah icon di menu blog yang harus dilakukan Untuk menambah icon ini sobat harus menginstall font Awesome di blog, dan langkhanya adalah sebagai berikut:

1. Login ke Blogger

2. Pilih Tema/Theme dan Edit HTML

3. Cari kode </head> dan letakkan kode berikut ini diatas kode </head> tersebut


<link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'/>

4. Untuk memilih icon yang akan digunakan dan mendapatkan kode HTML nya sobat perlu membuka situs Font Awesome

5. Pilih dan klik pada icon yang dibutuhkan

6. Klik pada bagian yang saya beri tanda panah seperti gambar dibawah ini untuk meng-copy kode html nya.

Baca Juga

7. Untuk langkah selanjutnya adalah memasang icon-icon tersebut ke blog. Edit HTML di template sobat. Cari kode HTML untuk menu blog sobat.

8. Tambahkan code html icon td ke sebelah nama kode menunya.

Contoh kode html icon

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

Contoh kode html menu

<li><a href='https://warmenot.blogspot.com/search/label/android'>Android</a></li>

Maka akan menjadi seperti ini

<li><a href='https://warmenot.blogspot.com/search/label/android'><i aria-hidden='true' class='fa fa-medkit'/> Android</a></li>

9. Klik Preview untuk melihat perubahannya.
10. Simpan

Itulah cara yang bisa sobat lakukan untuk menambahkan icon di setiap menu navigasi pada blog sobat. Sekian dari ShareKu, semoga bermanfaat. Terima kasih