10 April 2017

Cara 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. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menambah icon di menu navigasi 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.

Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.
Cara Menambahkan Icon di Menu Navigasi Blog

Langsung saja untuk cara menambahkan icon di menu navigasi blog, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

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 kode </head>.
  2. <link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
  3. 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 Font Awesome Icons.
  4. Untuk memanggil icon yang kalian pilih, silahkan ketikan kode berikut.
  5. <i class='fa fa-nama icon yang kalian pilih'/>
  6. Letakan script di atas sebelum nama menu navigasinya. Lakukan seperti contoh di bawah ini.
  7. <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>
  8. Berikut adalah contoh menu navigasi saya. Selanjutnya silahkan masukan icon sesuka hati kalian.
Cara Menambahkan Icon di Menu Bar dengan Font Awesome

Cara Mengatur Ukuran Icon

  1. Untuk mengatur ukuran Icon kita bisa menambahkan code seperti ini.
  2. <li><a class='active' href='/'><i class='fa fa-home fa-lg'/> Home</a></li>
  3. Berikut adalah urutan ukuran Font Awesome.
  4. Icon Code
    fa-lg
    fa-2x
    fa-3x
    fa-4x
    fa-5x
(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)

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