Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :

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.

Baca juga: Cara Terbaru Mendapatkan Tema LINE Gratis (Tanpa Root)

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.

Baca Juga : Cara Mudah Dan Gampang Setting Domain Ke Blog

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

7 Comments

Leave a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This div height required for enabling the sticky sidebar