Berita Warganet Kumpulan Berita dan Informasi Untuk Warganet
Breadcrumb adalah sebuah navigasi dalam website yang berfungsi untuk mengetahui lokasi pengunjung saat dia berada di suatu website. Pada artikel ini, akan dijelaskan tentang cara merubah tampilan breadcrumbs blog di template VioMagz.
Breadcrumb bisa menjadi lebih menarik dengan menambahkan kode CSS ke template anda. Dengan mempercantik tampilan Breadcrumb di Viomagz, anda akan memiliki nilai lebih yang akan membawa kemajuan blog anda. Caranya sangat mudah, anda tinggal menambahkan CSS ke template anda dan mengubah sedikit bagian HTML di template anda. Langsung saja, silahkan simak tutorialnya berikut ini.
- Buka blog anda
- Pilih Tema dan pilih Edit HTML
- Temukan kode seperti dibawah ini dan hapus kode tersebut
font-size: 0.9em !important;
}
.breadcrumbs a {
color: $(widget.title.color);
}
.breadcrumbs a:hover {
color: $(body.link.color);
}
- Salin kode ini dan paste diatas kode ]]></b:skin>
.breadcrumbs {
font-size: 0.9em !important;
}
.breadcrumbs a {
color: #ffffff;
}
.breadcrumbs a:hover {
color: #ef5350;
}
.breadcrumbs{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:15px 20px;background:#2F4F4F;color:#fff;text-transform:capitalize}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-3px}
- Cari kode di bawah ini
<b:includable id=’breadcrumb’ var=’posts’>…</b:includable>
- Lalu hapus, dan anda ganti dengan kode di bawah ini
<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:view.isPost’>
<b:loop values=’data:posts’ var=’post’>
<div class=’breadcrumbs’ itemscope=’itemscope’ itemtype=’https://schema.org/BreadcrumbList’>
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<a expr:href=’data:blog.homepageUrl’ itemprop=’item’ title=’Home’>
<meta content=’1′ itemprop=’position’/>
<span itemprop=’name’><b:switch var=’data:blog.locale’><b:case value=’id’/>Beranda<b:default/>Home</b:switch></span></a>
</span>
<b:if cond=’data:post.labels’>
<b:loop index=’nomor’ values=’data:post.labels’ var=’label’> &nbsp;›&nbsp;
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<meta expr:content=’data:nomor+2′ itemprop=’position’/>
<a expr:href=’data:label.url + "?&max-results=8"’ expr:title=’data:label.name’ itemprop=’item’ rel=’nofollow’>
<span itemprop=’name’><data:label.name/></span>
</a>
</span>
</b:loop>
<b:else/>
&nbsp;›&nbsp; <span itemprop=’name’><data:blog.pageName/></span>
</b:if>
</div>
</b:loop>
<b:elseif cond=’data:view.isPage’/>
<div class=’breadcrumbs’ itemscope=’itemscope’ itemtype=’https://schema.org/BreadcrumbList’>
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<a expr:href=’data:blog.homepageUrl’ itemprop=’item’ title=’Home’>
<meta content=’1′ itemprop=’position’/>
<span itemprop=’name’><b:switch var=’data:blog.locale’><b:case value=’id’/>Beranda<b:default/>Home</b:switch></span></a>
</span> &nbsp;›&nbsp;
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<meta expr:content=’data:num+2′ itemprop=’position’/>
<a expr:href=’data:blog.url’ expr:title=’data:post.url’ itemprop=’item’>
<span itemprop=’name’><data:blog.pageName/></span>
</a>
</span>
</div>
</b:if>
</b:includable>
- Terakhir, klik Simpan template, dan selesai.
Sekian ulasan tentang cara merubah tampilan breadcrumbs blog di template VioMagz, selamat mencoba dan semoga bermanfaat.
Cek Tutorial Lengkap Disini :
