Cara Merubah Tampilan Breadcrumbs Blog di Template VioMagz

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
Baca Juga :  Inilah Cara Mudah Membuat URL Blogspot

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
Baca Juga :  Pentingnya Desain Blog

<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’> &amp;nbsp;&#8250;&amp;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 + &quot;?&amp;max-results=8&quot;’ expr:title=’data:label.name’ itemprop=’item’ rel=’nofollow’>

<span itemprop=’name’><data:label.name/></span>

</a>

</span>

</b:loop>

<b:else/>

&amp;nbsp;&#8250;&amp;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’>

Baca Juga :  Inilah Cara Membuat Menu Home di Blogspot

<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> &amp;nbsp;&#8250;&amp;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 :