agung wisudhatama October 29, 2023 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

FONT AWESOME dalam era blog sekarang ini sering kali digunakan untuk memperindah tampilan website. Selain itu juga memperjelas sebuah navigasi dengan sebuah icon unik. Beberapa blog di luar sana banyak yang sudah menggunakan gambar untuk menampilkannya. Tapi ada juga yang menggunakan icon SVG, selain lebih ringan juga lebih estetik ketika dipandang.

Tapi karena caranya terbilang rumit, akhirnya sebagian besar menyerah dan beralih lagi ke format gambar JPEG untuk iconnya.

Tapi sekarang saya akan mencoba menampilkan icon navigasi blog dengan menggunakan Font Awesome atau dalam bahasa Indonesia Font Menakjubkan. Semenakjub apakah font tersebut? Dalam beberapa rilisan yang beredar di forum-forum blogger, menyebutkan font awesome menampilkan keindahan, keringanan dan kestabilan tampilan icon sehingga sangat fleksibel ketika ditampilkan untuk memperjelas sebuah navigasi.

Hanya caranya hampir sama dengan menampilkan format SVG, agak ribet memang. Tapi sepadan dengan hasilnya bukan? Semakin sulit menerapkan caranya, semakin indah pula hasilnya. Dalam ungkapan Jawa mengisyaratkan "Ono Rego Ono Rupo".

Cara Menambahkan Font Awesome di Navigasi

1. Masuk ke DASHBOARD Blogger
2. Pilih TEMA --> SESUAIKAN --> EDIT HTML
3. Masuk ke TEMPLATE
4. Temukan code </head> dan tempelkan kode dibawah ini persis diatasnya.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

5. Terakhir SAVE template dan PUBLIKASIKAN

Untuk mendapatkan icon awesome kalian bisa jelajahi si empunya icon. Ini nih dari fontawesome.io. Disitu terdapat banyak icon-icon cantik dapat kita pergunakan nantinya. Ukurannya juga banyak. Tinggal comot satu saja.

6. Selanjutnya setelah disave itu template, giliran cari kode untuk navigasinya. Biasanya akan terpampang seperti ini.

<nav class='sample'>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="URL">Blog</a></li>
  <li><a href="URL">Teknologi</a></li>
  <li><a href="URL">Gadget</a></li>
  <li><a href="https://alifacode.com">Tips Blogger</a></li>
 </ul> 
</nav>

7. Kalian tinggal copy paste code icon awesome tepat di depannya. Seperti ini contohnya.

Setelah dicopy icon HOME disini saya ambil contoh Home saja ya. Ini khan code iconnya <i class="fa-solid fa-house"></i>. Kemudian taruh di depan navigasinya jadinya seperti ini.

<nav class='sample'>
 <ul>
  <li><a class="fa-solid fa-house" href="#"> Home</a></li>
  <li><a href="URL"> Blog</a></li>
  <li><a href="URL"> Teknologi</a></li>
  <li><a href="URL"> Gadget</a></li>
  <li><a href="https://alifacode.com"> Tips Blogger</a></li>
 </ul> 
</nav>

8. Terakhir SAVE lagi dan lihat.

Catatan :
Untuk icon lain bisa dicari di fontawesome nya ya. Ntar tinggal tempel seperti yang sudah dicontohkan. Mudah bukan?

Contohnya ada di website ini. Tu navigasi atasnya sudah ada icon awesomenya. Mulai dari ABOUT, CONTACT, DISCLAIMER, POLICY, TOS. Coba nanti kalian utak-atik lagi template blog kalian ya. Jangan lupa back up dulu template-nya. Setelah itu lihat deh, pasti dah ada icon awesomenya. Jadi tambah keren khan?

Dalam kegelisahan, saya mulai memikirkan sesuatu hal yang membuat saya terhibur dan terlepas dari rasa penat yang kian mendera tubuh. Saya menulis sembari mendengarkan musik favorit saya. Mau tau musiknya -- AVENGED SEVENFOLD -- hehe.

Seperti jiwa muda yang sedang semangat membara mengejar impiannya ya. Tak kenal lelah menggapai asa dan menuainya. Sekarang saya akan mengistirahatkan otak dan badan saya sebentar. Istirahat di sore hari untuk mengembalikan ide dan gagasan untuk dituliskan disini untuk kalian semua. Tetep semangat ya.

Dalam kutipan Jalaluddin Rumi sang Pujangga termashur "Ketika dunia telah membuat kalian bertekuk lutut, maka kalian sedang berada dalam posisi yang sempurna untuk berdoa". Maka yakinlah tidak ada sesuatu hal yang sia-sia. Semua sudah digariskan bahkan saat kita merasa menyerah dan bertekuk lutut, kita masih diberi kesempatan untuk mendapatkan kemenangan dengan menengadahkan kedua tangan seraya meminta pertolongan pada Sang Maha Pencipta. Peace.

Bagikan ke teman-teman kamu

Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Menambahkan Font Awesome di Depan Menu Navigasi Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.