Cara Menambah Icon Pada Menu Navigasi Blog Dengan Mudah



Mungkin kita bosan dengan tampilan blog yang kebanyakan tulisan, sebagai solusi agar tampilan blog kita lebih menarik bisa dengan menambahkan icon pada menu navigasi blog

Icon merupakan gambar atau simbol yang berukuran lebih kecil. Icon yang akan digunakan akan melambangkan isi dari menu navigasi yang akan dibuat. Dengan adanya penambahan icon pada blog sedikit banyak nya akan memberikan ketertarikan pada blog kita.

Mungkin materi ini sudah banyak di blog lainnya, tapi kali ini saya akan membahas berdasarkan ilmu yang telah saya pelajari dari blog lain. 

Baiklah langsung saja kita masuk ke inti pembicaraan yaitu bagaimana cara membuat icon pada menu navigasi blog dengan mudah. Untuk gambaran hasilnya seperti gambar dibawah ini:

Cara membuat icon pada menu navigasi blog
Icon pada menu navigasi

Cara Menambah Icon pada Menu Navigasi Blog 

1.Silahkan masuk ke halaman bloggernya terlebih dahulu, kemudian klik pada menu Tema > edit HTML.  Selanjutnya copy dan pastekan kode di bawah ini diatas </head>.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

2.Kode diatas berfungsi sebagai kode pemanggilan font awesome, setelah di paste kan carilah kode-kode menu navigasi blog yang ingin ditambahkan icon

untuk memilih icon-icon yang digunakan, silahkan klik link berikut: 


http://fontawesome.io/icons/

3.Untuk memanggil icon yang telah dipilih, silahkan copy paste kan kode di bawah ini, setelah < a href=""> atau sebelum nama dari menu navigasi. 

<i class='fa fa-nama icon yang kalian pilih'/>

contoh seperti dibawah ini:

<li><a href='#'><i class='fa fa-user'/>About</a></li>

4.Setelah semua icon ditambahkan pada menu navigasi silahkan simpan kode tersebut. 

5. Selesai. 

Demikianlah, cara menambah icon pada menu navigasi blog dengan mudah... Memang mudahkan caranya... Selamat Mencoba. 



Previous
Next Post »

Silahkan berkomentar secara bijak dan sesuai dengan topik pembahasan. Terimakasih. ConversionConversion EmoticonEmoticon

Thanks for your comment