Cara Membuat Breadcrumb

Soal pengertian breadcrumb sendiri bisa kalian dapatkan di Mbah Google. Jadi saya sarankan untuk soal pengertian, bisa beralih dahulu dari blog saya.

Bagaimana? Sudah tahu pengertian breadcrumb? Kalau sudah mari lanjutkan membaca artikel saya ini.

Seperti yang kita tahu, breadcrumb merupakan syarat yang diperlukan bagi seorang blogger agar blog yang dibuat masuk dalam kriteria SEO, selain breadcrumb, bisa kamu cari dengan keyword "Syarat Blog SEO".

Dalam pembuatan breadcrumb ini banyak tutorial yang saya coba. Ada yang berhasil tapi tidak sempurna, bahkan ada yang gagal alias error. Setelah surfing, akhirnya saya menemukan caranya. Mungkin kalian juga sudha menemukan, tapi ada baiknya saya beritahukan yang lebih tepat agar ketika sudah edit HTML blog kalian dan kalian tes di Google Structure Data, hasil tesnya bisa menampilkan breadcrumb ada di blog kamu.


Paling pertama, pasti kamu akan diminta memasukkan kode setelah kode ]]></b:skin> yaitu kode ini:

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Kemudian hal yang kedua ada perbedaan, saya menemukan di beberapa tutorial breadcrumb, ada yang memasukkan kode setelah kode <div class='post hentry'> 

Saya sarankan jangan mengikuti tutorial itu, karena saya sudah mencoba namun gagal, entah karena struktur koding blog saya berbeda dengan yang membuat tutorial tersebut atau memang ada alternatif lain. Ya, dan alternatif itu ada di sini. Akan saya beritahukan kepada kalian. Jadi agar breadcrumb kamu terbaca di google struture data tadi, kamu harus masukkan kode setelah kode ini <b:includable id='main' var='top'> kemudian paste kode ini:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

JANGAN LUPA SAVE atau SIMPAN. Hal sepele seperti menyimpan HTML yang sudah kita edit sering saya lupakan, dan jangan sampai terjadi sesuatu kepada kalian semua. Oke, kalau tidak berhasil bisa share di kolom komentar ya :)