Cara Menambah Icon Di Menu Navigasi Blog Dengan Mudah
Kali ini saya ingin membagikan cara memasang logo di menu navigasi blog. Kalian pasti pernah berkunjung ke blog seseorang, lalu anda melihat tampilan menu ada gambar icon disamping menu-nya. membuat tampilan cukup indah dan elegankan, Jika anda ingin menerapkan didalam menu blog, caranya sangat gampang karena cara ini sudah saya terapkan kesemua tema blog dan berhasil, tinggal kita memahami letak kode htmlnya saja. Lalu bagaimana cara menambahkan gambar logo pada menu blog ? seperti contoh dibawah ini :
Di gambar atas ada icon gears untuk untuk tutorial, icon dolar untuk menu bisnis, gambar code untuk menu blog dan dan seterusnya, kalian nanti bisa memilih sendiri seusai keinginginan kalian. Jika anda ingin menambahkan suatu gambar icon pada blog anda silahkan ikuti langkahnya dibawah ini.
Keterangan
Dibawah ini sebelum diedit
Di gambar atas ada icon gears untuk untuk tutorial, icon dolar untuk menu bisnis, gambar code untuk menu blog dan dan seterusnya, kalian nanti bisa memilih sendiri seusai keinginginan kalian. Jika anda ingin menambahkan suatu gambar icon pada blog anda silahkan ikuti langkahnya dibawah ini.
Cara Menambah Icon Pada Menu Blog
silahkan simak dengan detail Cara menambah icon di menu navigasi blog anda :
- Silahkan kunjungi alamat ini untuk melihat icon-icon nya : https://fontawesome.com/v4.7.0/icons/#web-application
- Selanjutnya, kalian bisa pilih icon yang ingin anda gunakan. Ada banyak sekali pilihan icon di sana. contoh nya seperti dibawah
Jika kalian sudah memilih nama-nama icon nya. kemudian silahkan pelajari peletakan kode html menu nya dibawah ini. dibawah ini adalah kode menu Navigasi di Template HTML
<i aria-hidden='true' class='fa fa-home'/> Home</a></li>
Keterangan
- # Adalah URL Menu Blog Anda
- fa fa -home adalah nama menu icon silahkan dirubah, silahkan di ubah pada tulisan home nya saja
- Home adalah nama menu diblog anda.
Cara Menambahkan ke kode di menu navigasi html anda.
- Silahkan masuk ke tamplat blogger kemudian edit html.
- Cari posisi kode menu navigasi nya dengan cara CTRL + F terus cari misal tutorial
- setelah ketemu kalian akan menemukan kode seperti dibawah
<li><a href='#'> Tutorial</a>
Dibawah ini setelah diedit
<li><a href='#'><i aria-hidden='true' class='fa fa-gears'/> Tutorial</a>
Warna merah adalah tambahan untuk kode menu kalian. dan biru untuk nama icon nya, ganti hanya bagian gears nya saja.
Kemudian klik simpan, silahkan lihat tampilan nya dan sudah berubah. selamat mencoba, jika kalian masih ada yang masih belum difahami silahkan tinggalkan pesan dikomentar.
terimakasih
0 Response to "Cara Menambah Icon Di Menu Navigasi Blog Dengan Mudah"
Post a Comment