cara menambahkan icon pada bagian menu atas di Blogger

Baca Juga

Hai sahabat Blogger Kali ini saya akan memberikan tutorial cara menambahkan icon pada bagian menu atas di Blogger. kegunaan dari icon untuk menu ini adalah agar blog kita lebih bagus dan menarik lagi. untuk menampilkan ini anda dapat menggunakan gambar jpg,png dll.
tapi kali kita akan menggunakan sebuah website yang sudah menyediakan cukup banyak icon. langsung saja

Cara menggunakan Font Awesome

➤Untuk menampilkan Font Awesome kalian terlebih dahulu harus memasang CSS fontya di template

➤Masuk Template ➨ Edit HTML , lalu cari kode </head>

➤Setelah ketemu lalu masukan kode berikut tepat diatas kode </head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>

kode by: mastamvan

Save Template

Untuk medapatkan kode html dari icon tersebut silahkan kunjungi situs resminya, silahkan masuk ke link berikut http://fontawesome.io/icons/ tinggal klik icon yang ingin kalian gunakan dan copy kode Htmlny pada bagian bawah.

Tahap selanjutnya kalian pasang kode tersebut pada Navigation Bar yang ingin di pasangkan icon

Kembali di Template tadi ➨ Edit HTML, dan cari kode menuya, misalnya seperti berikut :

<nav class='contoh'>
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="#">Tutorial</a></li>
  <li><a href="URL">Widget</a></li>
  <li><a href="UTL">Template</a></li>
  <li><a href="https://tkjarch.blogspot.com">Tips & Trik</a></li>
</ul> 
</nav>

kode by: mastamvan

Kalian tinggal tambahkan kode Html tadi di sebelah judul menunya. contoh

Gambar by: mastamvan (https://mastamvan.blogspot.co.id)

<li><a href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>

➤Jadi hasilnya seperti contoh di atas. yang kode tadi kita paste

➤Begitu juga dengan menu yang lain anda bisa memasang iconya di semua menu

Sekian dari artikel saya terimakasih.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Artikel Terkait