==Iklan Dipate Disini===
Dengan mempercantik tampilan Breadcrumb pada Viomagz kalian akan mempunyai nilai lebih dan sudah tentu nilai tersebut akan membawa nilai yang sangat baik buat kemajuan blog kalian. Caranya juga sangat gampang sekali, kalian hanya menambahkan CSS kedalam template kalian dan merubah sedikit bagian HTML di dalam template kalian. Tanpa basa - basi silahkan kalian simak tutorialnya di bawah ini.
Cara Mempercantik Breadcrumb Pada Template Viomagz
1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Cari kode seperti di bawah ini dan hapus kode tersebut.
.breadcrumbs {
font-size: 0.9em !important;
}
.breadcrumbs a {
color: $(widget.title.color);
}
.breadcrumbs a:hover {
color: $(body.link.color);
}
4. Salin kode di bawah ini dan letakan tepat di atas 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}
4. Lanjut cari kode seperti di bawah ini.
<b:includable id='breadcrumb' var='posts'>...</b:includable>
5. Jika sudah ketemu hapus kode di atas dan 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>
6. Simpan template kalian dan selesai.
Untuk merubah warna pada Breadcrumb tersebut, silahkan kalian rubah pada bagian kode di bawah ini.Untuk hasilnya kalian bisa klik tombol demo di bawah iniSilahkan kalian rubah pada bagian yang saya tandai dengan warna Hijau.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:#ffffff;text-transform:capitalize}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-3px}
Bagaimana sangat mudah bukan tentang Cara Mempercantik Breadcrumb Pada Template Viomagz, tutorial sengaja saya buat hanya untuk kalian pengguna template Viomagz. Jika kalian mempunyai pertanyaan seputar blogger atau seputar postingan di atas silahkan kalian bertanya melalui kolom komentar di bawah ini. Semoga bermanfaat dan terimakasih sudah berkunjung.
==Iklan Dipate Disini===