Cara Membuat dan Memasang Breadcrumbs di Blogspot

Breadcrumb adalah sebuah menu navigasi untuk mempermudah pengunjung web/blog untuk melacak lokasi dalam dokumen atau postingan yg sedang di baca. Dengan breadcrumb ini pengunjug akan mengetahui kategori label apa yang dia baca. Breadcrumb sendiri biasanya berada di bawah header atau di atas judul postingan.

Breadcrumb juga dapat memperkaya kata kunci dalam postingan web atau blog kita, tentunya sangat baik untuk SEO blog. Menurut pakar SEO memasang breadcrumb juga akan membuat konten/postingan blog lebih cepat terindex oleh search engine dan membuat tampilan di search engine akan lebih menarik.

Berikut ini Cara membuat Breadcrumbs di Blogspot.

• Login di Blogger.
• Pilih Template.
• Pilih Edit HTML (saya sarankan untuk mem back up template anda dulu guna menghindari kesalahan).
• Centang Expand Widget Templates.
• Kemudian cari kode ]]></b:skin>.
• Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>.

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

• Kemudian cari kode <b:includable id='main' var='top'>, gunakanlah CTRL+F untuk mempercepat pencarian.
• Ganti kode  <b:includable id='main' var='top'> dengan kode yang 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' 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'/>

• Kemudian silahkan save.
Untuk mengecek berhasil atau tidaknya pemasangan breadcrumb anda bisa mengeceknya di sini > http://www.google.com/webmasters/tools/richsnippets. Semoga bermanfaat. Baca juga tips memperbaiki broken link.