Jika anda pernah berkunjung pada blog seseorang, lalu anda melihat tampilan menu dengan ada gambar icon pada menu-nya. Cukup indah sepertinya. Lalu anda ingin menerapkan pula dalam blog anda. Anda bingung, bagaimana cara menambahkan gambar icon pada menu blog? Sebelumnya, maksud saya yang seperti ini,
Ada gambar rumah untuk Home, gambar folder untuk menu daftar isi, gambar telepon untuk menu Contact us dan Tanda seru pada Disclaimer. Jika anda ingin menambahkan suatu gambar icon pada blog anda ini langkahnya.
1) Kunjungi Alamat: https://fontawesome.com/v4.7.0/icons/#web-application
2) Selanjutnya, anda bisa pilih icon yang ingin anda gunakan. Ada banyak sekali icon pilihan di sana. Misalkan di sini
Dan masih banyak icon lainnya di sana. Silakan dipilih mana yang sekiranya anda mau. Klik icon yang ingin anda gunakan tersebut. Anda akan dibawa ke halaman baru, lalu perhatikan kotak dengan kode tertentu. Contoh kode untuk gambar universitas,
Cari dimana terdapat script tampilan menu navigasi pada template blog anda. Misalkan,
1) Kunjungi Alamat: https://fontawesome.com/v4.7.0/icons/#web-application
2) Selanjutnya, anda bisa pilih icon yang ingin anda gunakan. Ada banyak sekali icon pilihan di sana. Misalkan di sini
<i class="fa fa-university" aria-hidden="true"></i>Lalu anda copy code tersebut. Sekarang mari ke Edit HTML Template anda.
Cari dimana terdapat script tampilan menu navigasi pada template blog anda. Misalkan,
Perhatikan kode masing masing menu. Sisipkan kode <i class="fa fa-university" aria-hidden="true"></i> sebelum tulisan menu di atas. Contohnya,
<li><a href='/search/label/Blog'><i class="fa fa-pencil" aria-hidden="true"></i>Blogging</a></li>
<li><a href='/search/label/Bisnis'><i class="fa fa-university" aria-hidden="true"></i>Bisnis</a></li>
<li><a href='/search/label/Handphone'><i class="fa fa-mobile" aria-hidden="true"></i>Handphone</a></li>
Dan seterusnya. Terakhir silakan di simpan template anda.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment