Cara membuat breadcrumbs pada website atau blog

Baik setelah kita pelajari bersama - sama cara membuat blog, menentukan jenis-jenis blog, menentukan tema dan judul blog dengan isi materi yang baik, membuat laman atau CSS navigasi bar serta cara mengoptimalkan blog kita. Dari sekian yang kita pelajari bersama itu tentunya kita menginginkan agar semua isi posting blog kita juga lebih baik lagi dalam pencarian semua mesin pencarian serta perlu di ingat dalam memilih template kalau bisa sebaiknya yang ringan dalam artian loadingnya ringan dan juga perlu kita hati-hati agar dalam memilih template sebaiknya setelah kita mengunduh kita cek dulu secara teliti agar tidak diikuti oleh tautan-tautan yang tidak kita inginkan. Setelah kita mengerjakan bersama-sama semua proses seperti diatas kita akan melakukan sedikit polesan pada weblog kita agar lebih ramah lagi mesin pencari dalam mencari segala informasi bagi para pencari informasi yang dibutuhkan khususnya pada weblog kita tentunya perlu di ingat kita harus menentukan jenis-jenis blog page rank pada blog kita serta jangan lupa kita juga menentukan label dari semua materi yang kita postingkan itu. breadcrumbs merupakan salah cara yang baik dan  untuk memuat mesin pencari dalam menelusuri semua postingan materi weblog kita sebagai contoh gambar breadcrumbs dibawah ini.

Baiklah kita tidak perpanjang lagi yang akhirnya P x L mari kita mulai saja bagaimana cara breadcrumbs, mari kita pelajari secara bersama-sama dengan seksama:

1. Pertama kita baca Basmallah dulu bersama-sama lalu Login ke akun Blogger Anda. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
Centang pilihan ‘Expand Template Widget’. itu untuk model blogger yang dulu
Cari kode ]]></b:skin> dan kemudian sisipkan kode berikut dibawah ini tepat di atasnya.

.breadcrumbs {
margin: 0px;
padding: 0px;
}

2. Cari kode <b:includable id='main' var='top'> dan kemudian sisipkan kode berikut ini tepat di atasnya.
<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='text-align: justify;'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
  <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a></span>
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.isLast == &quot;true&quot;'>
                &gt; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
              <b:else/>
                &gt; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
              </b:if>
            </b:loop>
            &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span>
          </div>
        <b:else/>
          <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &gt; <span>Unlabelled</span> &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span></div>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>

3. Cari kode <b:includable id='post' var='post'> dan kemudian perhatikan bahwa di bawahnya terdapat kode <h3 class='post-title entry-title'> yang secara default adalah seperti di bawah ini.

<h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>

4. Ganti <data:post.title/> yang terdapat pada kode tersebut dengan <b:include data='posts' name='breadcrumb'/> yang akhirnya menjadi seperti kode di bawah ini.

<h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <b:include data='posts' name='breadcrumb'/>
          </b:if>
        <b:else/>
          <b:include data='posts' name='breadcrumb'/>
        </b:if>
      </b:if>
      </h3>

5. Simpan template Anda. selesai dan berhasil jangan lupa baca Alhamdulillah.

*Sumber :http://antelu.blogspot.com/2014/05/cara-membuat-breadcrumbs-pada-website.html
*semoga bermanfaat kalau ada yang kurang mohon maaf namanya manusia tempat salah dan dosa