Cara Menambahkan Icon Menu di Template VioMagz

Hai, pada kesempatan kali ini saya akan sedikit berbagi sebuah tutorial, gimana sih caranya menambahkan icon menu di template viomagz? yang mana sampai saat ini saya suka banget dengan tampilannya yang minimalis. 


Nah sebenernya caranya sangat mudah, kalian hanya perlu memasukan font dari Font Awesome kedalam template kalian saja sih. Begini caranya. 

1#. Masuk ke Menu Dasbor Blogger > Tema > Edit HTML. 


Didalam Editor HTML, kalian cari variable dibawah berikut, beruntungnya Mas Sugeng menandai setiap fiturnya, jadi kita bisa menyesuaikannya dengan mudah. 

<!-- menu navigasi header start -->
Nah dibawahnya pasti ada beberapa tag (ul dan li), (jika kalian sudah menyesuaikan tema kalian dan mensetingnya seperti tutorial Panduan Setting Template Viomagz pada bagian mengedit menu navigasi, pasti kalian akan familiar dengan kode nya. 

2#. Tambahkan Kode dari Font Awesome

Pertama tama, kalian buka situs Font Awesome berikut, dan cari Icon yang sesuai dengan keinginan kalian. 


Didalam halaman icon yang kalian pilih, silahkan ambil pada bagian html, tepat seperti yang saya tandai digambar diatas. Contohnya adalah seperti berikut:
<i class="fab fa-adn"></i>
Nah kode diatas, adalah kode HTML dari Icon yang akan kita gunakan. Selanjutnya, kembali ke Editor HTML, dan tambahkan kode tersebut disebelah Label Menu kalian. Namun tambahkan sedikit variable agar lebih menarik, menjadi seperti berikut:
<i aria-hidden='true' class='fa fa-adn'/>
Untuk kode lengkapnya setelah diedit akan jadi seperti berikut:
<li><a href='/search/label/Tutorial%20Android'><i aria-hidden='true' class='fa fa-adn'/> Tutorial Android</a></li>


Jika sudah selesai, silahkan simpan tema, dan reload halaman blog kamu. 

Sebelum
Sesudah
Nah simpel banget kan.. Untuk icon, ada banyak sekali icon yang disediakan oleh Font Awesome, jadi kalian bisa mencari icon apapun sesuai keinginan kalian. 

Silahkan berikan komentarmu dibawah, semoga bermanfaat. 

0 Response to "Cara Menambahkan Icon Menu di Template VioMagz"

Post a Comment

Contact Form

Name

Email *

Message *

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel