Cara Menambahkan Icon di Menu Navbar Pada Blog atau Website
Sudah lama saya tidak membuat artikel di blog ini dikarenakan terlalu sibuk dengan pekerjaan dunia nyata. Di libur panjang kali ini saya akan membuatkan artikel mengenai cara menambahkan icon di menu navbar pada blog, baik yang menggunakan platform blogspot dan juga wordpress.
Disini saya akan menggunakan font awesome, salah satu icon vector yang banyak digunakan untuk mempercantik tampilan blog atau suatu website khususnya pada menu navbar. Sebenarnya ada banyak icon vector lainnya, namun entah kenapa saya lebih senang menggunakan Font Awesome. Selain itu, Font Awesome sangat rajin update untuk menampilkan icon-icon terbaru.
Biasanya bila kita menggunakan template yang premium ataupun yang free, script untuk pemanggilan font awesome sudah tersedia. Mungkin saja belum terupdate, jadi terkadang ada icon yang tidak tampil dikarenakan hal tersebut.
Sebelum memasang icon dari font awesome pastikan icon tersebut sudah support dengan versi yang kamu gunakan, jika belum support dan kamu ingin menggunakan icon terbaru silahkan update script pemanggilan font awesome nya dengan versi yang terbaru.
Saya membuat artikel ini, karena ada pengunjung blog saya yang berkomentar di artikel cara membuat pagination di blogger, dia menanyakan cara membuat icon/gambar di menu navbar yang terdapat pada blog ini.
Sebenarnya cara cukup mudah, kamu hanya perlu menambahkan script yang sangat singkat, berikut ini scriptnya.
Sebagai contoh di atas saya memanggil icon hastag, jika ingin menggunakan icon yang lain silahkan lihat icon font awesome 4.7.0. Kamu tidak perlu mengubah semua scriptnya, hanya yang saya warnai merah saja.
Saya beri contoh lagi, misalkan kamu ingin menampilkan icon android di menu navbar blog atau website kamu. Kamu dapat menemukan di font awesome 4.7.0 yang sudah saya berikan link ke situsnya. Untuk mempermudah pencarian silahkan tekan Ctrl + F kemudian searching kata Android. Jika sudah ketemu di klik dan akan muncul tampilan seperti di bawah ini.
Perhatikan yang saya tandai, jadi kamu hanya perlu copy itunya saja dan tiban di script sebelumnya. Sehingga script untuk menampilkan icon android adalah seperti di bawah ini.
Saya rasa sekarang kamu sudah mengerti cara pemanggilan icon font awesome, sekarang waktunya menerapkan di blog atau website, baik menggunakan platform blogspot dan wordpress.
1. Pertama-tama silahkan login ke blogger.com
2. Selanjutnya pilih Tema > lalu tekan Edit HTML
3. Kemudian cari navigasi header berada (Sesuaikan dengan template yang kamu gunakan) atau bisa lihat gambar di bawah ini
4. Sebagai contoh saya akan menampilkan icon android di menu aplikasi. Maka saya akan menambahkan script di atas tepat sebelum tulisan Aplikasi. Sehingga akan seperti gambar di bawah ini.
5. Jika sudah jangan lupa klik Simpan Tema, dan silahkan lihat blog kamu.
Baca Juga: Cara Menampilkan Widget Blogger di Halaman Tertentu
1. Pastikan sudah masuk ke blog atau website kamu
2. Jika sudah masuk, kemudian pilih Appearance > lalu pilih Menus
3. Pada bagian Menu Structure, pilih terlebih dahulu menu mana yang ingin ditambahkan icon. Disini saya memilih menu Beranda untuk menampilkan icon home
4. Caranya, pada bagian Navigation Label masukan script berikut tepat sebelum tulisan Beranda <i class="fa fa-home"></i>. Sehingga scriptnya menjadi <i class="fa fa-home"></i> Beranda atau seperti gambar di bawah ini
5. Jika sudah jangan lupa klik Simpan, dan silahkan lihat blog atau website kamu
Oke saya rasa cukup tutorial cara menambahkan icon di menu navbar pada blog atau website, semoga artikel ini dapat membantu kamu untuk mempercantik tampilan atau blog yang kamu kelolah.
Disini saya akan menggunakan font awesome, salah satu icon vector yang banyak digunakan untuk mempercantik tampilan blog atau suatu website khususnya pada menu navbar. Sebenarnya ada banyak icon vector lainnya, namun entah kenapa saya lebih senang menggunakan Font Awesome. Selain itu, Font Awesome sangat rajin update untuk menampilkan icon-icon terbaru.
Biasanya bila kita menggunakan template yang premium ataupun yang free, script untuk pemanggilan font awesome sudah tersedia. Mungkin saja belum terupdate, jadi terkadang ada icon yang tidak tampil dikarenakan hal tersebut.
Sebelum memasang icon dari font awesome pastikan icon tersebut sudah support dengan versi yang kamu gunakan, jika belum support dan kamu ingin menggunakan icon terbaru silahkan update script pemanggilan font awesome nya dengan versi yang terbaru.
Saya membuat artikel ini, karena ada pengunjung blog saya yang berkomentar di artikel cara membuat pagination di blogger, dia menanyakan cara membuat icon/gambar di menu navbar yang terdapat pada blog ini.
Sebenarnya cara cukup mudah, kamu hanya perlu menambahkan script yang sangat singkat, berikut ini scriptnya.
<i class="fa fa-hashtag"></i>
Sebagai contoh di atas saya memanggil icon hastag, jika ingin menggunakan icon yang lain silahkan lihat icon font awesome 4.7.0. Kamu tidak perlu mengubah semua scriptnya, hanya yang saya warnai merah saja.
Saya beri contoh lagi, misalkan kamu ingin menampilkan icon android di menu navbar blog atau website kamu. Kamu dapat menemukan di font awesome 4.7.0 yang sudah saya berikan link ke situsnya. Untuk mempermudah pencarian silahkan tekan Ctrl + F kemudian searching kata Android. Jika sudah ketemu di klik dan akan muncul tampilan seperti di bawah ini.
Perhatikan yang saya tandai, jadi kamu hanya perlu copy itunya saja dan tiban di script sebelumnya. Sehingga script untuk menampilkan icon android adalah seperti di bawah ini.
<i class="fa fa-android"></i>
Saya rasa sekarang kamu sudah mengerti cara pemanggilan icon font awesome, sekarang waktunya menerapkan di blog atau website, baik menggunakan platform blogspot dan wordpress.
Cara Menambahkan Icon di Menu Navbar pada Blogspot
Untuk menambahkan icon di menu navbar pada blog atau website yang menggunakan platform blogspot, berikut langkah-langkahnya:1. Pertama-tama silahkan login ke blogger.com
2. Selanjutnya pilih Tema > lalu tekan Edit HTML
3. Kemudian cari navigasi header berada (Sesuaikan dengan template yang kamu gunakan) atau bisa lihat gambar di bawah ini
4. Sebagai contoh saya akan menampilkan icon android di menu aplikasi. Maka saya akan menambahkan script di atas tepat sebelum tulisan Aplikasi. Sehingga akan seperti gambar di bawah ini.
5. Jika sudah jangan lupa klik Simpan Tema, dan silahkan lihat blog kamu.
Baca Juga: Cara Menampilkan Widget Blogger di Halaman Tertentu
Cara Menambahkan Icon di Menu Navbar Pada Wordpress
Untuk menambahkan icon di menu navbar pada blog atau website yang menggunakan platform wordpress, berikut langkah-langkahnya:1. Pastikan sudah masuk ke blog atau website kamu
2. Jika sudah masuk, kemudian pilih Appearance > lalu pilih Menus
3. Pada bagian Menu Structure, pilih terlebih dahulu menu mana yang ingin ditambahkan icon. Disini saya memilih menu Beranda untuk menampilkan icon home
4. Caranya, pada bagian Navigation Label masukan script berikut tepat sebelum tulisan Beranda <i class="fa fa-home"></i>. Sehingga scriptnya menjadi <i class="fa fa-home"></i> Beranda atau seperti gambar di bawah ini
5. Jika sudah jangan lupa klik Simpan, dan silahkan lihat blog atau website kamu
Oke saya rasa cukup tutorial cara menambahkan icon di menu navbar pada blog atau website, semoga artikel ini dapat membantu kamu untuk mempercantik tampilan atau blog yang kamu kelolah.