Temen-temen yang baru masuk ke dunia blogger perlu mengetahui tentang pentingnya menu navigasi dalam sebuah website atau blog.
Memasang menu navigasi merupakan sebuah kewajiban bagi seorang blogger, gunanya ialah untuk memudahkan pengunjung blog dalam mengakses artikel ataupun mencari informasi lainnya yang tersedia pada blog kamu agar tidak bingung dan tersesat.
Untuk mempercantik tampilan pada blog, kamu juga bisa menambahkan icon pada menu navigasi blog kamu. Sebagai contoh kamu bisa melihat tampilan yang ada di blog driacom.com ini, karena sudah ditambahkan icon pada setiap menu navigasi nya.
Apa sih keuntungan dari menambahkan icon pada menu navigasi blog ?
Tujuan utama dari menambahkan icon pada menu navigasi ialah agar blog kamu terlihat lebih cantik dan tentu untuk menarik perhatian para pengunjung agar nyaman melihat tampilan blog kamu. Dengan begitu kamu bisa mendapatkan pengunjung yang setia. Dengan demikian, traffic blog kamu meningkat
Lalu apakah icon tersebut tidak membuat loading blog berat?
Tenang saja, untuk menambahkan icon pada menu navigasi kamu kamu bisa menggunakan format SVG, sehingga loading blog kamu tidak menjadi berat. Sehingga blog kamu akan tetap responsive dan SEO friendly. Untuk caranya sangatlah mudah dan singkat, tidak perlu menggunakan CSS tambahan dan dalam proses pembuatan nya pun kamu tidak perlu menggunakan jasa orang lain.
Jadi pada kesempatan kali ini, saya ingin memberikan sedikit tutorial tentang cara menambahkan icon pada menu navigasi blog. Tanpa berlama-lama langsung saja kita menuju tutorial nya. Simak penjelasan dibawah ini ya..
Cara Menambah Icon Pada Menu Blog dengan Mudah
1. Login ke akun blog kamu.
2. Klik menu Tema dan pilih Edit HTML.
3. Masukkan kode di bawah ini dan letakkan tepat dibawah <head> atau sebelum </head>
<link href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' rel='stylesheet'/>
4. Cari icon yang akan kamu gunakan di website fontawesome.com
Situs font awesome ini sudah sangat terkenal di kalangan blogger, pasalnya sudah banyak dipakai oleh para pembuat template untuk menambahkan icon pada template yang mereka buat. Pada website tersebut terdapat banyak sekali icon yang bisa anda pilih untuk dijadikan icon menu navigasi blog kalian. Dalam font awesome ini terdapat icon yang gratis dan juga ada yg berbayar, jadi kamu cukup memilih icon yang gratis jika kamu tidak ingin mengeluarkan biaya.
5. Setelah menemukan icon yang anda inginkan, anda akan melihat contoh kode icon seperti dibawah ini
<i class="fab fa-android"></i>
6. Copy kode tersebut dan letakkan di menu navigasi yang ada di tata letak. Untuk hasilnya akan seperti dibawah ini.
<li><a href="https://www.driacom.com/search/label/ANDROID"><i class="fab fa-android"></i><font size="2"> Android</font></a></li>
7. Kemudian tekan simpan dan lihatlah hasil nya.
Cara Mengatur Ukuran Icon Menu Navigasi
Setelah kamu berhasil menambahkan icon pada menu navigasi blog, kamu juga bisa mengatur besar kecilnya ukuran icon sesuai dengan keinginan kamu.
1. Berikut ini rincian ukuran icon pada font awesome
2. Untuk mengatur icon pada menu navigasi blog, kamu cukup menambahkan kode size pada script yang kamu buat di tata letak seperti yang di atas. Contohnya seperti ini :
<li><a href="https://www.driacom.com/search/label/ANDROID"><i class="fab fa-android fa-5x"></i><font size="2"> Android</font></a></li>
Kode warna merah tersebut adalah kode ukuran icon.
3. Simpan dan Selesai.
Nah, jadi itulah tutorial singkat mengenai cara mudah menambahkan icon pada menu navigasi blog. Sekarang kamu sudah berhasil menambahkan icon pada menu navigasi blog. Bagaimana hasilnya? Tampilan blog kamu menjadi lebih cantik, bukan? Jika belum berhasil, kemungkinan ada langkah yang terlewat atau belum kamu lakukan. Jadi ulangi dari awal dan baca dengan teliti. Selamat mencoba
Posting Komentar