Sudah usang aku tidak menciptakan artikel di blog ini dikarenakan terlalu sibuk dengan pekerjaan dunia nyata. Di libur panjang kali ini aku akan menyebarkan artikel mengenai cara menambahkan icon di hidangan navbar pada blog, baik yang memakai platform blogspot dan juga wordpress.
Disini aku akan memakai font awesome, salah satu icon vector yang banyak dipakai untuk mempercantik tampilan blog atau suatu website khususnya pada hidangan navbar. Sebenarnya ada banyak icon vector lainnya, namun entah kenapa aku lebih bahagia memakai Font Awesome. Selain itu, Font Awesome sangat rajin update untuk menampilkan icon-icon terbaru.
Biasanya bila kita memakai 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 kau gunakan, jikalau belum support dan kau ingin memakai icon terbaru silahkan update script pemanggilan font awesome nya dengan versi yang terbaru.
Saya menciptakan artikel ini, alasannya yaitu ada pengunjung blog aku yang berkomentar di artikel cara menciptakan pagination di blogger, ia menanyakan cara menciptakan icon/gambar di hidangan navbar yang terdapat pada blog ini.
Sebenarnya cara cukup mudah, kau hanya perlu menambahkan script yang sangat singkat, berikut ini scriptnya.
<i class="fa fa-hashtag"></i> Sebagai pola di atas aku memanggil icon hastag, jikalau ingin memakai icon yang lain silahkan lihat icon font awesome 4.7.0. Kamu tidak perlu mengubah semua scriptnya, hanya yang aku warnai merah saja.
Saya beri pola lagi, misalkan kau ingin menampilkan icon android di hidangan navbar blog atau website kamu. Kamu sanggup menemukan di font awesome 4.7.0 yang sudah aku berikan link ke situsnya. Untuk mempermudah pencarian silahkan tekan Ctrl + F kemudian searching kata Android. Jika sudah ketemu di klik dan akan muncul tampilan menyerupai di bawah ini.
Perhatikan yang aku tandai, jadi kau hanya perlu copy itunya saja dan tiban di script sebelumnya. Sehingga script untuk menampilkan icon android yaitu menyerupai di bawah ini.
<i class="fa fa-android"></i> Saya rasa kini kau sudah mengerti cara pemanggilan icon font awesome, kini waktunya menerapkan di blog atau website, baik memakai platform blogspot dan wordpress.
Cara Menambahkan Icon di Menu Navbar pada Blogspot
Untuk menambahkan icon di hidangan navbar pada blog atau website yang memakai platform blogspot, berikut langkah-langkahnya:1. Pertama-tama silahkan login ke blogger.com
2. Selanjutnya pilih Tema > kemudian tekan Edit HTML
3. Kemudian cari navigasi header berada (Sesuaikan dengan template yang kau gunakan) atau sanggup lihat gambar di bawah ini
4. Sebagai pola aku akan menampilkan icon android di hidangan aplikasi. Maka aku akan menambahkan script di atas sempurna sebelum goresan pena Aplikasi. Sehingga akan menyerupai 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 hidangan navbar pada blog atau website yang memakai platform wordpress, berikut langkah-langkahnya:1. Pastikan sudah masuk ke blog atau website kamu
2. Jika sudah masuk, kemudian pilih Appearance > kemudian pilih Menus
3. Pada bab Menu Structure, pilih terlebih dahulu hidangan mana yang ingin ditambahkan icon. Disini aku menentukan hidangan Beranda untuk menampilkan icon home
4. Caranya, pada bab Navigation Label masukan script berikut sempurna sebelum goresan pena Beranda <i class="fa fa-home"></i>. Sehingga scriptnya menjadi <i class="fa fa-home"></i> Beranda atau menyerupai gambar di bawah ini
5. Jika sudah jangan lupa klik Simpan, dan silahkan lihat blog atau website kamu
Oke aku rasa cukup tutorial cara menambahkan icon di hidangan navbar pada blog atau website, agar artikel ini sanggup membantu kau untuk mempercantik tampilan atau blog yang kau kelolah. Sumber http://www.warunginter.net/