Cara Memasang Breadcrumb di Blogger

Cara Memasang Breadcrumb di Blogger

Breadcrumb adalah sebuah menu navigasi sederhana yang biasanya berada diatas postingan sebuah blog. Isinya berupa link menuju home lalu diikuti dengan kategori yang berhubungan dengan postingan yang dibaca para pengunjung. Breadcrumb ini benar-benar cukup penting sebagai pendukung SEO pada blog kalian.

Hari ini kita akan memberikan sebuah tutorial berjudul Cara Memasang Breadcrumb di Blogger. Jadi, kita langsung saja ke langkah-langkahnya.

1. Pergi ke Dasbor Blogger > Tema > Edit HTML. Setelah itu tambahkan kode ini tepat diatas </head>.

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
</style>

2. Kemudian kalian carilah kode seperti ini.

<b:includable id='comment-form' var='post'>

3. Lalu Tambahkan kode ini tepat diatasnya.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<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'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

4. Kemudian kalian cari lagi kode seperti ini.

<b:includable id='main' var='top'>

5. Tambahkan kode ini tepat dibawahnya.

<b:include data='posts' name='breadcrumb'/>

Penutup

Sekian dulu tutorial kita mengenai Cara Memasang Breadcrumb di Blogger. Semoga bermanfaat untuk kita semua dan jika ada yang ingin ditanyakan silakan berikan komentar kalian dibawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    0 Komentar

    Posting Komentar

    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel