Cara Menambahkan Icon Pada Menu di Blogspot

Salah satu cara untuk mempercantik tampilan blog adalah dengan menambahkan icon pada bagian menu. Cara kali ini khusus untuk pengguna blog dengan flatform blogspot, untuk pengguna wordpress caranya sedikit berbeda.

Seperti pada menu blog ini, saya menggunakan icon dengan extensi .png. Jangan khawatir, kalian juga bisa menambahkan gambar pada menu tanpa harus membuat gambarnya secara manual. 

Saya mengambil gambar pada situs fontawesome.com dengan menggunakan akun gratis.

Tampilah gambarnya seperti ini 

Ada banyak gambar gratis yang bisa anda pakai, dan jangan lupa untuk mencantumkan kreditnya ya.

Cara menambahkan icon pada menu Blogspot

1. Menambahkan kode CSS pada template Blog

Masuk ke Theme > Customise > Edit HTML > cari kode </head>

Untuk menemukan kode head anda bisa menggunakan perintah CTRL+F lalu ketik </head>

Cambahkan kode CSS 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"/>

2. Memilih icon di situs fontawesome.com

Cukup kunjungi situs fontawesome dan pilih gambar icon yang dinginkan, untuk mengambil kodenya cukup klik kode icon maka akan otomatis terkopy.

Seperti contoh berikut, pada bagian yang saya beri tanda merah adalah kode icon yang perlu anda copy.

Kode icon diatas adalah 

<i class="fas fa-plus"></i> 

nanti anda cukup fas menjadi

 <i class="fa fa-plus"></i>

3. Menambahkan kode icon pada Template Blog

Untuk menambahkan icon pada menu yang diinginkan, anda cukup menempelkan kode diatas tepat disamping nama menu yang diinginkan. 

Caranya:

Masuk ke Theme > Customise > Edit HTML > cari menu yang diinginkan. Anda bisa mencari dengan bantuan Find (CTRL+F)

Misalkan anda ketemu  seperti menu dibawah ini

<li><a href='http://'>Home</a></li>

Maka anda cuku menambahkan kode icon tepat sebelum nama menu , sehingga menjadi seperti ini :

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

Jika sudah selesai silahkan disimpan dan lihat hasilnya, seharusnya akan mucul icon disamping menu seperti gambar berikut ini. Jika belum muncul mungkin anda perlu mencoba mengganti kode icon dengan yang lain. 

Seharusnya jika langkah-langkahnya sudah sesuai maka akan berhasil.

Demikian cara menambakan icon pada menu di blogspot. Semoga bermanfaat dan terimakasih. Jika ada yang tidak berhasil silahkan tinggalkan komentar dibawah.