10 April 2017

Cara Menambahkan Icon di Menu Navigasi Blog

Cara Menambahkan Icon di Menu Navigasi BlogCara Menambahkan Icon di Menu Navigasi Blog - Kita tahu icon biasanya berbentuk kecil, biasanya untuk melambangkan suatu judul. Icon di sebuah blog biasanya digunakan untuk menambah kesan menarik pada tampilan blog.

Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome.

(Baca juga : Cara Mudah Memasukan Halaman Statis(Laman) Di Menu Navigasi)

Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.

Berikut langkah-langkah Cara Menambahkan Icon di Menu Navigasi :


Cara Menambahkan Icon di Menu Navigasi Blog

Cara Memasukan Icon di Script Menu Navigasi

1. Langkah pertama, buka akun blogger kalian. Masuk ke menu Tema, kemudian pilih Edit HTML. Kemudian masukan code dibawah ini, dan letakan sebelum </head>.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> 

2. Setelah meletakan kode pemanggil ke Font Awesome. Kemudian cari menu yang ingin di tambahkan icon. Setelah kalian dapatkan menu yang akan di tambahkan icon, silahkan pilih icon yang akan kalian tambahkan di http://fontawesome.io/icons/ .

3. Untuk memanggil icon yang kalian pilih, silahkan ketikan kode berikut.
<i class='fa fa-nama icon yang kalian pilih'/> 

4. Letakan script di atas sebelum nama menu navigasinya. Lakukan seperti contoh di bawah ini.
<li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'><i class='fa fa-file'/> Modul</a></li>
<li><a href='#'><i class='fa fa-code'/> PHP dan Mysql</a></li>
<li><a href='#'><i class='fa fa-file-powerpoint-o'/> PowerPoint</a></li>
<li><a href='#'><i class='fa fa-file-text'/> Makalah</a></li>

5. Berikut adalah contoh menu navigasi saya. Selanjutnya silahkan masukan icon sesuka hati kalian.
Cara Menambahkan Icon di Menu Navigasi Blog
Tutorial Umum - Cara Menambahkan Icon di Menu Navigasi Blog

(Baca juga : 
Cara Memasang Link Menu Navigasi di Blogger)

Cara Mengatur Ukuran Icon

Untuk mengatur ukuran Icon kita bisa menambahkan code seperti ini.
<li><a class='active' href='/'><i class='fa fa-home fa-lg'/> Home</a></li> 

Berikut adalah urutan ukuran Font Awesome.
Icon Code
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

(Baca juga : Cara Memunculkan Sub Menu di Menu Navigasi Blog)

Demikian tutorial singkat dari saya, lebih dan kurang saya mohon maaf. Untuk tutorial blog lainnya selalu kunjungi tutorialumum.com.

Terimakasih sudah berkunjung di blog saya, jika ada pertanyaan, kritik, atau saran silahkan berkomentar di kolom komentar. Karena kritik dan saran dari kalian sangat membantu saya dalam membangun sebuah blog.

15 comments

makasih infonya sangat bermanfaat min

Alhamdulillah sekarang sudah bisa memberi ikon menu di navigasi blog saya,,, sangat bermanfaat....

Mayan nih biar tambah cucox :D thx infonya gan, Ntabbb :v

Wah ini dia yg saya cari" gan , ijin coba buat di blog saya gan :)

font awesome memang awesome banget :)

ijin menerapkan diblog ane gan, mantap.

Wah jelas nie penjelasannya, makasih...

sama2 gan
Terima kasih sudah berkunjung

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon