Menambah Icon SVG pada Breadcrumb Template Viomagz Terbaru (Ubah Bawaan)
Ditulis pada: June 14, 2021
Cara menambah Icon SVG pada Breadcrumb Template Viomagz Terbaru dengan jalan mengubah bentuk breadcrumb bawaan template viomagz V4.6.0. Boleh anda lakukan dengan mengikuti tutorial dibawah ini.
Breadcrumb bawaan dari viomagz memang kurang bervariasi dibuat oleh developernya. Bentuknya yang monoton membuat saya ingin merubah tampilannya. Karena hali ini, saya mencari-cari ide dan script yang cocok.
Saya sudah mencoba beberapa script CSS breadcrumb dari internet dan diterapkan pada template ini. Hasilnya, ada yang letaknya berubah, iconnya terlalu besar, dan masalah lainnya. Setelah saya memperlajari beberapa script, saya melakukan kombinasi dari script-script itu dan berhasil.
Menambah Icon SVG pada Breadcrumb Template Viomagz Terbaru (Ubah Bawaan)
1. Tambahkan kode ini sebagai CSS dari breadcrumb, letak dari kode ini taruh saja diatas
/* Back to top */
#back-to-top {
2. Silahkan copy dan pastekan kode ini. Pada template ini sudah ada CSSny, anda harus menghapus kode css bawaan viomagz ini terlebih dahulu.
/* Breadcrumb */
.breadcrumbs {
font-size:11px;
color:#666;
padding:0 0 5px;
margin:0 0 12px;
border-bottom:1px dotted #ddd;
}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
3. Langkah kita selanjutnya kita menambahkan icon SVG pada breadcrumb. Silahkan cari kode berikut ini ditemplate viomagz terbaru.
<meta content='1' itemprop='position'/></span>
4. Tambahkan kode ICON SVG HOME ini dibawahnya.
<svg viewbox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" fill="#000000"></path></svg>
5. Beriktunya kita menambahkan icon SVG label pada breadcrumb. Silahkan cari kode berikut ini ditemplate viomagz terbaru.
<div class="breadcrumbs" itemscope="itemscope" itemtype="https://schema.org/BreadcrumbList">
6. Tambahkan kode ICON SVG LABEL ini dibawahnya.
<svg viewbox="0 0 24 24"><path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z" fill="#000000"></path></svg>
