Cara Memasang Breadcrumbs di Blogger SEO Friendly

Pada postingan ini, saya akan coba menjawab pertanyaan dari sahabat pli-it.com yang bertanya cara membuat link pencarian blog kita bisa menampilkan Label. dan setelah saya pahami dan mengerti, ternyata maksudnya seoerti gambar dibawah.

Breadcrumb bisa dikatakan adalah salah satu trik untuk penunjang SEO. bisa kita lihat pada gambar diatas, hasil dari pencarian menampilkan hompage dan setelah itu label dari artikel tersebut.

Jika sobat tertarik dengan trik blogger Breadcrumb ini, langsung saja.
1. Login ke Blogger
2. Pilih Template
3. Dan sobat Klik Edit HTML

4. Setelah itu, akan tampil form seperti dibawah, kemudian centang pada Expand Widget Template

5 . Kemudian masukan kode CSS berikut diatas kode ]]></b:skin> Untuk memudahkan pencarian, gunakan pencarian di browser, sobat tekan Ctrl+F.

.breadcrumbs {
border-bottom:1px dotted #999;
margin:2em 0 0.5em;
padding:0 0 0.5em;
font-size:10px
}

Kode CSS diatas bisa dimodifikasi sesuai tampilan laman sobat.

6. Cari kode HTML <b:includable id='main' var='top'>
7. Jika sudah ketemu ganti kode tersebut dengan kode HTML berikut 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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <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>
&#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'/>

8. Terakhir Save Template

Sekian Cara Memasang Breadcrumbs di Blogger SEO Friendly, Jika ada pertanyaan, silahkan bertanya pada komentar dibawah, semoga bermanfaat ^_^