Cara menambahkan Breadcrumb di template HTML

Menambahkan Breadcrumb HTML

Dibawah ini akan menjelaskan 2 cara menambahkan Breadcrumb kedalam template HTML Blogger. Untuk kode HTML Breadcrumbnya lihat dipostingan sebelumnya di : Menambahkan Navigasi Breadcrumb

Menambahkan Breadcrumb melalui default markup

Defaultmarkup template Soho - Blogger v3

Seperti pada screenshot diatas, memasukkan kode HTML atau javascript melalui defaultmarkup berarti meletakkan kode HTML / Javascript didalam tag :
<b:defaultmarkups> dibawah tag :
<b:includable type='Common'>
<!--- Letakkan kode disini --- >

Pada template blog, tag <b:defaultmarkups> berada dibawah b:template-skin tepatnya didalam tag <head>

Karena tujuan pembahasan ini adalah untuk memasang Breadcrumb, maka kode HTML Breadcrumb yang sudah di copy nantinya dipastekan kedalam tag :

<b:includable id='postBreadcrumb' var='post'>
<!-- pastekan kode HTML Breadcrumb disini -- >
</b:includable>

Kode HTML Breadcrumb

Karena saya rasa ribet copy-paste kode, dibawah ini saya sediakan kode Breadcrumb HTML lengkap dalam tag b:includable, sekali copy langusng paste ke dalam template sesuai petunjuk diatas (dibawah tag type='Common').

<b:includable id='postBreadcrumbs' var='post'>
  <div class='breadcrumb'>
    <ol itemscope='' itemtype='http://schema.org/BreadcrumbList'>
      <li class='hidden' itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
          <a expr:href='data:blog.homepageUrl' itemprop='item'>
        <span itemprop='name'><data:view.title.escaped/></span></a>
      <meta expr:content='data:view.title.escaped' itemprop='name'/>
      <meta content='1' itemprop='position'/>
    </li>
    <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <a expr:href='data:blog.homepageUrl' itemprop='item'>
        <span itemprop='name'>Depan</span></a> &#8250;
      <meta content='Beranda' itemprop='name'/>
      <meta content='2' itemprop='position'/></li>
    <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
      <span itemprop='name'>
        <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' itemprop='item' rel='tag'>
            <span><data:label.name/></span></a> &#8250;
            </b:loop>
          </span>
        <meta content='3' itemprop='position'/>
      </li>
      <li itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem'>
        <span itemprop='name'><data:view.post.title/></span>
        <meta expr:content='data:post.url' itemprop='item'/>
        <meta content='4' itemprop='position'/>
      </li>
    </ol>
  </div>
</b:includable>

Letakkan rangkaian kode tersebut dibawah tag <b:defaultmarkup type='Common'>

Selanjutnya membuat "kode panggil" seperti ini :

<b:include data='post' name='postBreadcrumb'/>

Perhatikan :
id='' pada tag <b:includable id='namaElemen'> harus sama dengan :
name='' pada tag panggilnya yaitu : <b:include name='nemeElemen'>.
Apabila penulisannya tidak sama maka elemen tidak akan tampil di halaman postingan manapun. Untuk memudahkan, buat nama yang sederhana misal : postSnippet / breadCrumb / postBC / dst... Kuncinya yang penting id dengan name harus sama.

Lihat di halaman b:includable

Setelah itu letakkan kode panggil ditempat dimana Breadcrumb akan dimunculkan dihalaman. Karena biasanya ditempatkan diatas judul postingan, maka cari tag b:includable id='postTitle'. Cara cepatnya gunakan pencarian template, tekan Ctrl + F lalu ketik 'posttitle dengan satu tanda kutip diawal saja sudah bisa untuk mencari targetnya.

Kata kunci pada pencarian template, tidak peka terhadap huruf besar / kecil. Yang diutamakan adalah karakter huruf, spasi dan tanda baca harus sama.

Jika sudah ditemukan, paste kode tersebut tepat dibawah kode dengan id='postTitle' seperti screenshot dibawah ini.

Apabila paham cara kerja dan fungsi tag defaultmarkup <b:includable> kita bisa lebih leluasa menempatkan kode panggil, misal dibawah ini adalah tag yang berbeda tetapi jika diletakkan diatas name='postTitle' target dan hasil akhirnya tetap sama, yaitu diatas judul postingan.

Lihat hasil pemasangan Breadcrumb melalui defaultmarkup dibawah ini yang belum disertai kode CSS

Karena didalam template biasanya terdapat beberapa defaultmarkup dengan name='' yang sama jika peletakan kode tadi belum muncul setelah di save dan di-preview, ulangi cara diatas

Kode CSS Breadcrumb

Untuk menyelesaikan pemasangan, tahap akhir adalah memberkan gaya (style) pada elemen yang baru saja dipasang.
Copy kode CSS dibawah ini, paste tepat dibawah kode </b:skin> Save dan preview hasilnya.

<b:if cond='data:view.isSingleItem'>
<style>
.breadcrumb {
    position: relative;
    width: 100%;
    display: block;
    margin: 10px 0;
    padding: 5px 0;
    background: #eeeeee;
}
.breadcrumb ol {
    display: flex;
    flex-wrap:nowrap;
    justify-content:space-around;
    gap:1px;
    padding: 5px 10px;
    list-style: none;
    width: fit-content;
    margin: 0 auto;
    border-top: 1px dotted #999;
    border-bottom: 1px dotted #999;
}
.breadcrumb ol li {font:normal 400 14px 'Oswald', sans-serif}
</style>
</b:if>

Kenapa CSS tersebut diletakkan terpisah ??

Alasannya adalah :

Agar lebih mudah ditemukan.
Agar digunakan hanya pada saat dibutuhkan (Single Item saja)
Agar pemuatan halaman selain single item bisa lebih cepat tanpa memuat css tersebut
Cara ini adalah cara paling receh untuk membantu pagespeed insight meskipun dampaknya kecil.
OKE ... semoga berhasil.

Hasil akhir setelah ditambahkan CSS:

⇐ Sebelumnya

Selanjutnya ⇒

Coding Blogger