Cara Mempercantik Breadcrumb Pada Template Vmagz

Demo    Mei 26, 2020    Blogger , CSS , HTML    Comment   

Lapakinfo.net - Di kesempatan ini saya akan berbagi tutorial tentang Cara Mempercantik Breadcrumb Pada Template Viomagz dengan mudah, Breadcrumb ialah sebuah navigasi yang berfungsi untuk mengetahui letak pengunjung ketika pengunjung berada di dalam sebuah website. Kalian tau gak sih jika breadcrumb itu bisa menjadi lebih cantik dan menarik hanya dengan menambahkan kode CSS ke dalam template kalian, cara ini sudah saya coba dan hasilnya sangat bagus sekali.

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'> &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'>
        <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>

6. Simpan template kalian dan selesai.

Untuk merubah warna pada Breadcrumb tersebut, silahkan kalian rubah pada bagian kode di bawah ini.

.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}

Silahkan kalian rubah pada bagian yang saya tandai dengan warna Hijau

Untuk hasilnya kalian bisa klik tombol demo di bawah ini

• Demo

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.