Cara Menambahkan Icon Di Menu Navigasi Blog Dengan Mudah

menambahkan icon di menu navigasi blog


Selamat malam sobat blogger. Apa kabarnya nih ? semoga kita senantiasa sehat dan tetap berada di jalan-Nya ya hehe. Setelah beberapa hari saya gak nge-post dikarenakan beberapa hal, akhirnya malam ini (berhubung weekend) saya ada sedikit waktu luang, jadinya bisa disempatin buat bikin postingan.
Beberapa minggu yang lalu, teman-teman blogger saya BW-an ke blog saya (BW = Blog Walking alias jalan-jalan ke blog saya), terus mereka liat menu blog saya ada icon-iconnya, dan mereka tertarik untuk bikin seperti itu di blog mereka. Daripada saya menjelaskan caranya ke mereka satu per satu, akhirnya saya putuskan untuk mengangkat topik tersebut menjadi postingan di blog saya, yaitu tentang cara menambahkan icon di menu navigasi blog dengan mudah.

Kira-kira seperti inilah tampilan menu navigasi blog yang saya maksud.
icon keren untuk menu navigasi blog

Gimana ? tertarik untuk mencobanya ? yuk silakan baca step by step caranya.
1. Pertama-tama silakan visit situs penyedia icon gratisnya fontawesome. Seperti inilah kira-kira tampilan home dari situs tersebut
icon menu navigasi blog jadi keren

2. Lalu pada kolom pencarian, ketikkan nama icon yang ingin kalian gunakan.
3. Pilih icon yang kalian inginkan, lalu copy-kan kode html yang saya beri tanda merah 
icon keren untuk menu navigasi blog
4. Lalu buka blog kalian, buka Tema > edit HTML, lalu cari menu yang ingin kalian tambahkan icon, dalam hal ini saya akan menambahkan icon tersebut ke menu contact. Prinsipnyaa yaitu dengan menambahkan kode <i class='fa fa-book fa-fw'/> ke kode html dari menu yang ingin kalian tambahkan icon. Tulisan yang berwarna merah adalah kode icon yang bisa kita ganti sesuai keinginan kalian, kode yang kita dapat dari fontawesome tadi. Gambar di bawah ini adalah contoh kode html yang sudah saya tambahkan icon di menu navigasi blog saya. Untuk lebih mudah ikuti saja seperti yang saya punya.

icon navigasi blog jadi keren

5. Pada kode <i class='fa fa-book fa-fw'/> gantikan kode yang saya beri tanda garis biru dengan kode yang kalian dapatkan dari fontawesome tadi. Setelah digantikan, hasilnya akan seperti ini <i class='fa fa-phone fa-fw'/>.
memperkeren icon navigasi blog

6. Lalu simpan, dan lihat hasilnya.
icon keren untuk menu navigasi blog


Sekian tutorial dari saya tentang cara menambahkan icon di menu navigasi blog dengan mudah. Kalau ada yang kurang jelas boleh ditanyakan di kolom komentar di bawah. Terimasih dan selamat mencoba.


Keyword: cara menambahkan icon di menu blog, menu navigasi blog keren, icon keren untuk menu navigasi blog, cara mengedit menu navigasi blog, tutorial blog

7 komentar

Mantap gan, saya sudah coba dan work. Blog saya jadi keren. Nice info

Samasama gan. Senang bisa membantu

Informatif sekali, sekarang memang lagi musim menambah icon di menu navigasi...

Hehe senang bisa membantu bro. Blog yg menu navigasinya pake icon emang terlihat lebih profesional

# Komentar sesuai topik
# Sopan
# Jangan SPAM
EmoticonEmoticon