Buat Tampilan Menu Blog Terlihat Keren Menggunakan Font Icon - Tuan Siput
Jika kamu sering berkunjung ke berbagai jenis blog yang membahas berbagai macam topik, mungkin kamu pernah melihat menu yang menggunakan icon gambar. Seperti icon yang berbentuk rumah, telepon, komputer, koran dan lain-lain.

Membuat tampilan seperti itu tentu saja akan membuat blog terlihat berbeda dan biasanya akan menarik perhatian pengunjung blog.

Untuk membuat menu itu sendiri sebenarnya sangatlah mudah dan tidaklah sulit, karena hanya perlu menyisipkan kode icon saja pada bagian kode menu.

Meskipun mudah tapi tidak selamanya blogger tahu akan hal ini, khususnya blogger pemula umumnya tidak tahu akan cara ini.

Berikut ini cara membuat menu dengan menggunakan icon yang bisa diterapkan dalam blog.

1. Login di "blogger.com" > pilih "Tema" > klik "Edit HTML".

2. Cari kode menu yang akan digunakan di template blogmu. Seperti dalam blog ini kodenya yaitu:

<li><a href='#'>Computer</a></li>

3. Copy kode dibawah ini dan letakkan sebelum hufur pertama pada menu "untuk contoh diatas huruf pertama adalah C".

<i aria-hidden='true' class='fa fa-laptop'/>

4. Maka hasilnya akan seperti ini:

<li><a href='#'><i aria-hidden='true' class='fa fa-laptop'/> Computer</a></li>

Usahakan antara kode dan hufur pertama diberi spasi agar icon tidak terlalu dekat dengan teks, tapi itu terserah saja jika ingin untuk dekat dengan teks juga tidak masalah.

5. Setelah itu klik "Simpan tema" dan lihat perubahan yang terjadi. Tema yang awalnya teks akan berubah menjadi kombinasi icon dan teks.

Icon yang dapat digunakan ada begitu banyak. Beberapa situs dibawah ini yang dapat dikunjungi untuk melihat berbagai macam jenis icon.

fontawesome.com/icons

Note:
  • Untuk icon yang saya gunakan dicontoh adalah icon laptop.
  • Hasilnya bisa dilihat pada menu di blog ini.

Buat Tampilan Menu Blog Terlihat Keren Menggunakan Font Icon

Jika kamu sering berkunjung ke berbagai jenis blog yang membahas berbagai macam topik, mungkin kamu pernah melihat menu yang menggunakan icon gambar. Seperti icon yang berbentuk rumah, telepon, komputer, koran dan lain-lain.

Membuat tampilan seperti itu tentu saja akan membuat blog terlihat berbeda dan biasanya akan menarik perhatian pengunjung blog.

Untuk membuat menu itu sendiri sebenarnya sangatlah mudah dan tidaklah sulit, karena hanya perlu menyisipkan kode icon saja pada bagian kode menu.

Meskipun mudah tapi tidak selamanya blogger tahu akan hal ini, khususnya blogger pemula umumnya tidak tahu akan cara ini.

Berikut ini cara membuat menu dengan menggunakan icon yang bisa diterapkan dalam blog.

1. Login di "blogger.com" > pilih "Tema" > klik "Edit HTML".

2. Cari kode menu yang akan digunakan di template blogmu. Seperti dalam blog ini kodenya yaitu:

<li><a href='#'>Computer</a></li>

3. Copy kode dibawah ini dan letakkan sebelum hufur pertama pada menu "untuk contoh diatas huruf pertama adalah C".

<i aria-hidden='true' class='fa fa-laptop'/>

4. Maka hasilnya akan seperti ini:

<li><a href='#'><i aria-hidden='true' class='fa fa-laptop'/> Computer</a></li>

Usahakan antara kode dan hufur pertama diberi spasi agar icon tidak terlalu dekat dengan teks, tapi itu terserah saja jika ingin untuk dekat dengan teks juga tidak masalah.

5. Setelah itu klik "Simpan tema" dan lihat perubahan yang terjadi. Tema yang awalnya teks akan berubah menjadi kombinasi icon dan teks.

Icon yang dapat digunakan ada begitu banyak. Beberapa situs dibawah ini yang dapat dikunjungi untuk melihat berbagai macam jenis icon.

fontawesome.com/icons

Note:
  • Untuk icon yang saya gunakan dicontoh adalah icon laptop.
  • Hasilnya bisa dilihat pada menu di blog ini.