Navigasi breadcrumbs untuk Blogspot

membuat breadcrumbsBreadcrumbs adalah menu navigasi yang memudahkan dan membantu user sebagai penunjuk navigasi sebuah blogspot atau website,  selain itu keberadaan breadcrumbs juga sangat disukai oleh mesin penelusurnya google terbukti menu navigasi ini sering terindek dan muncul di mesin pencariannya google. jadi dengan adanya breadcrumbs ini akan menambah poin tersendiri khususnya dalam hal SEO. Berikut ini adalah cara membuat breadcrumbs

 Masuk ke Blogspot menuju ke Blog yang akan dipasang kemudian masuk ke edit template selanjutnya:
Cari kode </b:skin> dan copy code css dibawah ini dan paste kan tepat diatasnya: </b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
kemudian Cari kode <b:includable id='main' var='top'> setelah ketemu ganti dengan kode dibawah 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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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'/>
setelah itu klik save dan simpan template anda
untuk mengecek breadcrumbs ini bisa terindek google atau tidak anda bisa mengujinya di Google rich snipet caranya copy url postingan blog anda dan paste di kolom URL kemudian klik preview
Berikut ini contoh postingan yang sudah benar dalam pemasangan breadcrumbs teruji di Google rich snipet
cara membuat breadcrumbs

home