Cara Menambah Icon di samping Navigasi di blog
Cara mudah menampilkan icon di menu pada blog dengan 2 cara yaitu kode html dan css, untuk menampilkan icon Home/Folder/File atau yang lainnya jenis icon bisa dicek di fontawesome.io ,tutorials saya buat ini karena ada salah satu member di group BI(Blogger Indonesia) :3 bukan Bank Indonesia loh. sebelumnya saya sudah mau membuat artikel seperti ini untuk di Sidebar. karena kasusnya hampir sama jadi saya ubah lagi agar hampir sama dengan kasus dia dan artikel yang akan saya buat sebelumnya.
Silahkan ikuti cara dibawah dengan baik.
Sebelum itu di template anda harus sudah ada font-awesome.min.css
jika tidak ada bisa salin kode dibawah ini dan letakkan diatas </head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");var o=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);setTimeout(function(){i.media=n||"all"})}loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>Dengan Kode HTML
contoh saja misalkan kamu ingin memberi ikon disebelah kiri kata 'Home' berikut kode sebelum ada icon
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>maka yang perlu kita lakukan memasukkan kode html sebelum kata 'Home' untuk memanggil icon yang diinginkan. berikut kode html icon home. disini saya menggunakan fontawesome
<i class='fa fa-home'/>untuk mengubah icon yang lainnya kamu hanya perlu mengubah 'fa fa-home', kode icon bisa liat langsung di web fontawesome.
setelah mengubah kita akan menggabungkan kode diatas menjadi satu, seperti kode dibawah ini.
<li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>intinya jika ingin menampilkan icon dimanapun itu letakknya kamu hanya perlu memberi html <i class='fa fa-home'/>
tahap diatas dilakukan secara manual, mungkin ada yang bertanya bagaimana jika menu navigasi ini langsung dibuat di Tata Letak bukan di Edit HTML.
Dengan kode CSS
oke disini kita akan menggunakan fungsi css sebagai pemanggil class yang akan ditampilkan icon. contoh nama class navigasi kita disini "navblog",bisa dicek dengan Inspect Element pada blog anda pada menu navigasi. "navblog" saya dapat setelah inspect dengan tampilan html sebagai berikut
<div class="navblog">jadi anda ambil "navblog", karena kita menggunakan class jadi css nya ".navblog", kita buat langsung css untuk menambah ikon sebelum kata "Home" pada navigasi kita.
salin css dibawah ini dan letakkan diatas kode </b:skin>
.navblog:before {
content:'\f015';
display: inline-block;
font-weight: normal;
font-family: fontawesome;
}dari kode css diatas maka setiap anda membuat menu baru misalkan saja dengan kata "Sehat" maka akan otomatis muncul ikon untuk merubah jenis iconnya silahkan ganti "f015" kode icon bisa diliat di web fontawesome. kekurangan cara ini untuk nav yaitu iconnya akan sama terus jika anda membuat menu baru dengan kata yang berbeda. cara ini cocok untuk di class Sidebar,Footer, kenapa? karena untuk disidebar untuk mempercantik kata untuk judul Widget baru yang kamu buat. kalau untuk menu kurang sesuai karena icon harus sesuai dengan kata agar pengunjung mudah memahami maksud dari icon yang tampil.
Artikel Sebelumnya: Convert Semua Gambar ke PDF di Ubuntu 16.04 LTS
artikel ini saya buat dengan offline, ntar kalau saya ada waktu akan saya coba membuat css agar tiap menu berbeda icon.
