Cara Membuat Breadcrumb di Blog

Breadcrumb adalah salah satu alat navigasi blog, yang berfungsi untuk menampilkan lokasi artikel yang sedang dibaca. Breadcrumb biasanya terletak diatas artikel, dibawah header atau dibawah menu horizontal. Bentuk breadcrumb sendiri biasanya seperti ini, Judul Blog >> Label/Kategori >> Judul Posting. Dari susunan katanya saja, kita sudah dapat mengetahui bahwa artikel yang sedang dibaca, berada di label/kategori a, dari awal halaman blog.

Dan itu sangat memudahkan pengunjung untuk melihat judul posting yang lain, yang berada di label/kategori yang sama. Ketika pengunjung klik Label/kategori di Breadcrumb, maka akan terbuka halaman baru yang berisi artikel dengan Label/kategori yang sama. Begitu juga jika yang di klik adalah judul blog, maka akan terbuka halaman awal dari blog. Contoh gambar Breadcrumb dibawah ini atau lihat diatas judul artikel ini.

Cara membuat Breadcrumb di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke Blog dan klik pengaturan template. Back up dulu template kamu(jaga2).
2. Klik Edit HTML dan cari kode ]]></b:skin> (gunakan Ctrl F untuk memudah kan pencarian) dan tempatkan kode dibawah ini, diatas ]]></b:skin> .
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px dotted #666666;
}
3. Keterangan: border-bottom:1px adalah garis bawah setelah breadcrumb. dan dotted #666666; adalah bentuk dan warna garis bawah Breadcrumb. Dotted = bentuknya Titik(...) bisa diganti dengan Solid( ___ ) atau Double (=).
4. Selanjutnya, Cari kode <b:includable id='post' var='post'> lengkapnya kira-kira seperti dibawah ini.
<b:includable id='post' var='post'>...</b: includable>
5. Klik tanda >...< maka kodenya menjadi seperti dibawah ini.
<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
6. Sekarang Tempatkan kode berikut dibawah <b:includable id='post' var='post'> 
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Pengguna Komputer</a> &gt;&gt;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &gt;&gt; <data:post.title/>
</div>
</b:if>
</b:if>
7. Keterangan: Pengguna Komputer bisa diganti dengan Home atau nama halaman blog kamu. &gt;&gt; itu bentuk tanda >> setelah judul. 
8. Sekarang save template kamu, dan buka salah satu artikel. Breadcrumb sudah jadi, Selesai.

Update: Cara Buat Breadcrumb yang terindeks Google. 

Sebelum menggunakan cara ini, hapus dulu breadcrumb yang sudah terpasang di template kamu. Selanjutnya.

1. Login ke Blogger. Ke pengaturan Template.
2. Edit HTML dan cari kode <b:include data='top' name='status-message'/>
3. Selanjutnya masukan kode <b:include data='posts' name='breadcrumb'/> diatasnya.
4. Sekarang cari <b:includable id='main' var='top'> dan masukan kode berikut ini diatasnya.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<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' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
5. Selanjutnya, Save template. Dan buka salah satu postingan kamu. Copy alamat URL nya. 
6. Dan pastekan di http://www.google.com/webmasters/tools/richsnippets
7. Untuk mengecek breadcrumb sudah di indeks google atau belum. Jika sudah, maka tampilanya akan seperti gambar diatas. Semoga Bermanfaat.

Tweet