Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome) - Pada kesempatan kali ini saya akan membagikan tutorial cara menambah atau memasang icon keren dan menarik pada menu bar atau navigasi. untuk menambahkan icon ini banyak sekali caranya,contohnya anda menggunakan logo, icon SVG dan yang lainnya. akan tetapi cara itu memakan banyak waktu dalam proses pembuatannya. jadi kita menggunakan cara yang simple dan mudah saja yaitu dengan menggunakan font awesome.
Baca Juga : Cara Mudah Memasang Tombol Button Share Melayang di Blog Terbaru
Baca Juga : Cara Mudah Memasang Tombol Button Share Melayang di Blog Terbaru
Icon ini memiliki gambar yang ukuran dimensinya kecil. Biasanya icon melambangkan sesuatu ataupun mewakili dari suatu judul dan sebagainya. Namun, jika pada blog icon menjelaskan kategori artikel yang telah kita posting. dengan kita menambahkan icon di menu navigasi blog kita menjadi daya tarik sendiri dan blog pun akan terlihat lebih profesional dan keren.
 |
| Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome) |
Sebelum anda memasang icon pada menu bar atau navigasi, anda harus memasang font awesome terlebih dahulu. karena jika anda belum memasangnya, nanti iconnya tidak akan muncul. font awesome ini juga banyak digunakan oleh para pembuat template, karena bisa menambahkan berbagai macam icon agar template itu terlihat profesional dan menarik.
Dibawah ini ada contoh pemasangan icon pada Menu Navigasi Bar di blogger menggunakan Font awesome :
 |
| Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome) |
Oke langsung saja ke cara pemasangannya, berikut adalah langkah-langkah memasang icon keren pada menu bar atau navigasi di blogger menggunakan font awesome :
- Pertama, kita pasang terlebih dahulu font awesomenya ke blog, masuk terlebih dahulu ke Dashboard blog anda
- Kemudian pilih Template > Edit HTML, lalu cari kode</head>
- Setelah itu tambahkan script di bawah ini tepat di atas kode </head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
- Terakhir Save Template
Cara di atas adalah proses pemasangan font awesome ke dalam template blog anda, apabila anda sudah pernah mamasang font awesome, silahkan lewati saja cara diatas. bagi yang belum memasang font tersebut, sialhkan pasang terlebih dahulu.
Baca Juga : Cara Mudah Memasang Tag Atribut Hreflang agar lebih SEO Friendly di Blogger
Baca Juga : Cara Mudah Memasang Tag Atribut Hreflang agar lebih SEO Friendly di Blogger
Langkah selanjutnya adalah pemasangan icon pada menu bar atau naviagasi, silahkan anda masuk ke link Icon Pack Font Awesome.
- Cari icon yang ingin anda pasang pada blog anda.
- Klik iconnya, lalu copy HTML icon tersebut, contohnya seperti gambar di bawah ini
 |
| Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome) |
Selanjutnya kita pasang icon tersebut di blog, entah itu pada menu bar atau di tempat lain.- Disini saya akan memasang icon tersebut pada menu bar atau navigasi.
- Silahkan pergi ke Tema => Edit HTML, Kemudian cari contoh kode html seperti di bawah ini
<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<!-- menu navigasi header start -->
<ul>
<li><a href='#' itemprop='url'><span itemprop='name' title='Tips And Trik'><i class='fas fa-bars'/> Tips And Trik</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name' title='Games'><i class='fas fa-gamepad'/> Games</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name' title='Komputer'><i class='fas fa-desktop'/> Komputer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name' title='Template'><i class='fas fa-theater-masks'/> Template</span></a>
</li>
</ul>
<!-- menu navigasi header end -->
</nav>
- Setelah itu tinggal pasang atau tambahkan HTML icon yang sudah anda copy tadi di sebelah judul Menunya. contohnya bisa anda lihat gambar di bawah ini :
 |
| Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome) |
- Cara tersebut juga bisa anda terapkan jika anda ingin memasang iconnya di tempat lain.
- Setelah itu tinggal anda Save atau Simpan
Nah itulah Cara Memasang Icon Menu Navigasi Bar di Blogger (Font Awesome). apabila anda masih belum paham atau ada yang kurang terkait tutorial di atas, silahkan anda tanyakan di kolom komentar di bawah postingan ini. semoga bermanfaat.
Posting Komentar