Senin, 05 Maret 2018

Cara Menambahkan Icon Pada Menu Navigasi Blog

Assalamualaikum...
KENEONO – Dikesempatan kali ini saya akan share Cara Menambahkan Icon Pada Menu Navigasi Blog. Mungkin pernah melihat blog orang lain dengan tampilan menunya ada icon kecil yang menyesuaikan pada menu navigasi, mungkin sobat pingin menambahkan pada blog sendiri dirasa lebih keren lagi jika ada icon nya pada menu navigasinya. Untuk menambahkan icon ini tidak smudah sobat yang dipikirkan mungkin seperti halnya mengupload gambar di sosmed tetapi disini kita menggunakan sebuah kode HTML dan juga Font Awesome yang semua template mungkin sudah memakainya.


Berikut Cara Cara Menambahkan Icon Pada Menu Navigasi Blog Dengan Mudah :

- Pertama silakan masuk Dahsboard blogger pilih Tema -> Edit HTML. Kemudian tempelkan kode script dibawah ini diatas kode </head>.


<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

- Jika sudah silakan sobat pilih icon yang ingin ditampilkan di menu navigasi https://fontawesome.com/icons silakan copy nama iconn`ya.

- Untuk memanggil icon yang telah sobat pilih supaya bisa nampil di menu navigasi kita membutuhkan kode tambahan untuk menampilkannya.


<i class='fa fa-nama icon yang sobat pilih'/>

- Nah untuk penggunannya contohnya seperti dibawah ini, silakan sobat cari kode menu navigasinya pada template blog kemudian edit seperti ini.


<li><a href='#'><i class='fa fa-user'/>About</a></li>
<li><a href='#'><i class='fa fa-envelope'/>Contact Me</a></li>
<li><a href='#'><i class='fa fa-gavel'/>Disclaimer</a></li>
<li><a href='#'><i class='fa fa-exclamation-triangle'/>TOS</a></li>


- Terakhir tinggal Save jika sudah semua, lihat hasilnya pasti akan ada icon kecil sebelum nama-nama pada navigasi blog.


Sekian artikel kali ini tentang Cara Cara Menambahkan Icon Pada Menu Navigasi Blog Dengan Mudah, semoga bisa bermanfaat untuk sobat semua...
Kunjungi terus blog Kene Ono untuk mendapatkan artikel menarik lainnya. Terimakasih...
Wassalamualaikum...

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

1 komentar

>> PERHATIKAN !!! <<

- Gunakan kata-kata yang bijak saat berkomentar ya sob.
- Berkomentar dengan Foto <i rel="image">URL_GAMBAR</i>
- Berkomentar dengan Code HTML silakan Parse dulu.